1. Simply set auto-flow to column and define two rows. The items will flow from top to bottom, starting a new column after two rows. To make the first item span multiple rows/columns, explicitly place it with drag and drop.
2. You should be able to achieve that pattern using :nth-child formulas. First, target all of the grid items and then use the CSS modifiers option to select an nth-child formula from the dropdown menu:
:nth-child(3n+1)
So your selector will look something like this:
.grid-item:nth-child(3n+1)
That should select the 1st, 4th, 7th etc. Once you’ve created your selector, set the grid-column-end property to span 2. That should do it.
Yes
Thank you very much
I did also spent some extra time to master the whole CSS Grid from those amazing YouTuber for the past few days as well. Now I have much more understand working with the UI after I hand code some css myself.
