We’ll add a image gallery to the page, using a nested CSS grid. In the process we’ll discover (and handle) the unexpected behaviour of images and Fraction units.
Let’s add a image gallery to our page – and use the CSS Grid to do it.
We need an element to hold our gallery.
A DIV will do. Drop it after the first paragraph.
Now we need some images.
Pinegrow includes a convenient tool for that.
Go to Page -> Insert photos from Unsplash.
Let’s search for Pine photos.
We can drag a couple of images to the page. Drag a Small sized versions and drop them into the Div.
Some images are oriented landscape, some portrait. It’s quite hard to image that we can easily arrange them into a good looking gallery.
But that’s what the CSS Grid is for.
Let’s select the DIV and open the Grid Editor.
Do you think we can have nested CSS Grids – one grid inside the other grid?
Sure we can.
Just click on Create Grid and… we got a mess.
It’s not as bad as it looks.
Our default grid has 3 columns in 1 row. The first 3 images went into those. The fourth image caused the browser to automatically create a second row.
To better see what’s going on, let’s hide all images, except the first one.
We use the hide icon in the Tree panel to do that. This feature hides the element in Pinegrow only.
Ok.
The image is overflowing the grid because the row size is set to 100px.
Let’s change it to Auto, so that the row size adjusts to the size of its content.
Do you notice something strange?
All three columns should be 1fr wide, but still, the first one is much bigger.
Well, it turns out that Fraction units have a secret.
If the content doesn’t fit into the area, the area expands to fit the content.
So, in case the content doesn’t fit into the space that is sized with Fraction units, the space behaves just like it would be sized with the Auto keyword.
What can we do?
We need to tell the image that it should only take up the available space. We’ll use CSS for that.
First, we need to organize our CSS structure a bit. Until now we just put all CSS declaration directly in the style attribute of HTML elements.
It’s time to start using proper CSS rules.
First, let’s select the Gallery DIV and click on the Save as CSS Rule icon on the Style Attribute section.
That brings up the Selector Maker tool.
We’ll create the rule for the Gallery class. Notice that Pinegrow also offers to assign the gallery class to the selected DIV.
Click Create to add the new rule for the Gallery class.
All CSS declarations from the Style attribute were copied to this rule.
We’ll use the .gallery class to target the gallery images with another CSS rule.
Select the first image and click on the … Create Rule.
We use the Selector maker to create the CSS rule that will target all Images in the Gallery.
Create.
In the CSS Editor we set the width to 100%. That makes the width of the image conform to the width of its Grid area.
Let’s do the same with the height.
But now we have a problem. Images lost their correct proportions.
Object-fit to the rescue!
Object-fit is a CSS property that defines how images should behave when resized. It is similar to the Background-Size property.
So we set Object-fit to Cover and images are cropped to keep their correct proportions.
It’s time to unhide the rest of the images.
Let’s add the second Grid row and set its size.
Add some gap and we have a gallery.
It’s not perfect, though.
See what happens when we resize the page. And what if the number of images is not fixed in advance?
We’ll take care of this next.