Help with CSS Grid unknown rows personal problem

[Hello_Forum]

Hello,

I am trying to create a form that has the title of the section (Items labeled 1 at the end of the div in the test) that spans over the entire form while having each category in its own area(Items with labels 2-4 at the end of their div) I have put Item 5 in as an outlier to test other parts. At the moment they are currently all stacked on top of one another instead of only taking up the grids horizontally while going down the list of divs. I am planning on making my project to have an ability that the user could add and delete rows if they want so I can’t add a specific number of rows.

https://codepen.io/letsfundthee/pen/qBaYaKO

Any help would be appreciated,

[robertgroves]

I’m not quite clear on what you’re tryin to achieve.

I’m envisioning the following:

[1-1                ]
[1-2]   [1-3]   [1-4]
[2-1                ]
[2-2]   [2-3]   [2-4]
[3-1                ]
[3-2]   [3-3]   [3-4]

If the above matches what you want, basically the item1 divs need to span the three columns of the grid. For this you can use a grid-area: x / y for .item1 —where x is the row placement, which should just be set to auto (so that auto-placement is used for the row), and y is the column placement where you can use the span keyword to tell it to span 3 columns. And the other items you can just let grid auto place where they fall in the order they exist in the DOM.

If my understanding doesn’t match what you meant, please add a picture or draw it out in a code block so I can understand better and help you.

[Hello_Forum]

You are correct on your envisioning except for where 2-1 is I would like item5 there and it only spans 2

So it would be more like

@robertgroves

[1-1                ]
[1-2]   [1-3]   [1-4]
[5          ]
[2-2]   [2-3]   [2-4]
[3-1                ]
[3-2]   [3-3]   [3-4]

I may be able to work around that though and make item5 span 3 and put another grid inside of it to place them where I want them.

Thanks for your help