We’ll define our gallery grid without specifying a fixed number of rows.
We need a way to define our Gallery Grid without specifying a fixed number of rows.
The solution is easy.
We’ll use Auto Rows declaration to tell the browser how large the automatically created rows should be.
We do this with grid-auto-rows CSS property.
In the Grid Editor we can access it by clicking on the small “Auto columns and rows” link beneath the Gap field.
There we set Auto Rows to 100px.
We can immediately see the rest of the images appearing in these auto rows. The auto rows were there before but their height was zero.
So, with this, why do we still need to declare our first two rows at all?
The answer is, we don’t have to – unless we want them to be sized differently than the rest of the rows.
We don’t need that. So let’s go ahead and delete both rows.
Ups… Now the grid disappeared.
Let’s undo.
To that In Pinegrow’s Grid Editor, we leave the first row and set its size to None.
If we inspect the CSS code we see that now only the columns and auto rows are defined. Just what we need.
With that, our simple CSS Grid gallery is complete.