CSS网格，行高动态

Question

我正在尝试使用CSS网格创建这样的布局

#producerContainer {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 30px;
}


#producerContainer
    div
        .formGroup
            label.formLabel Producer Name
            input

        .formGroup
            label.formLabel Full Name
            input

    div
        .formGroup
            label.formLabel Producer About
            textarea

        .formGroup
            label.formLabel Producer Name
            input

    div
        .formGroup
            label.formLabel Artwork
            // picture

        .formGroup
            label.formLabel Cover (Optinal)
            // picture

但是这些行的高度现在允许我让孩子们在彼此的正下方，这就是我所拥有的：

我是否可以使用网格实现此布局，还是应该采用其他系统？