A Responsive Photo Grid with CSS Grid LayoutFrank AtukundaBlockedUnblockFollowFollowingMay 6I’m currently working on a project that requires me to have a proficient grasp of CSS.
I have written CSS in the past but mostly with the help of Frameworks like Bootstrap but with this project, I’ve been forced to dive deeper into CSS with my main focus being the Grid Layout system.
In this blog, I’ll mostly be reflecting and demonstrating how to use the CSS Grid Layout to build a Photo grid like the one you see when you visit Unsplash.
I will not be able to demonstrate how all the Grid layout properties work but I’ll try to focus on the ones needed to accomplish this task.
What is the CSS Grid LayoutCSS Grid Layout is a two-dimensional layout system for the web.
Grid lets you organize content in rows and columns.
Imagine a webpage layout with a header, a Sidebar, the main content area, and a footer(Like the one displayed below in Figure 1).
These parts of a webpage require you to properly lay them out on a page.
CSS Grid will help you do that as we shall see in the Photo Grid example.
Figure 1: An example of using CSS Grid to design a webpage Layout.
Here is the photo grid we will build.
The Photo grid we will buildAlright, enough of the theory work.
Let’s get our hands dirty.
Create a folder on your machine and give it any name, I will call mine Photogrid.
Open the folder in your favorite text editor – I personally use VSCode.
Create 2 files.
One called index.
html and the other main.
css.
We shall write all our styles in the main.
css.
Copy the code below into index.
htmlAs you can see from the code snippet above, I’ve created 13 divs each with an image that I’m fetching from Unsplash.
The container div has a class of .
container and notice that some of the children of the container div have classes .
big, .
vertical and .
horizontal .
we will be styling those divs differently.
Now let’s head into styling our photo grid.
In main.
css let’s define the styles for our photo grid starting with the container class.
Let’s briefly go through what each of the above CSS properties does.
For any container to be treated as a grid container, it must have a display of grid or grid-inline for inline grids.
The grid-template-columns property defines the columns of the grid container.
You can specify the width of a column by using a keyword(like auto-fit) or a length (like 50px).
For the case of our example above, we are defining the value of grid-template-columns within a repeat() method.
The repeat method represents a repeated fragment of a tracklist.
Therefore, a value like repeat(3, 80px) will create three columns each with a width of 80px .
The auto-fit keyword handles the column sizing.
It helps to fit as many columns as possible in a row given their length, for example, a grid-template-columns value of repeat(auto-fit, 100px) will create as many columns as there are divs in the grid container each with a width of 80px .
Finally, the minmax function defines the minimum width of each column and the maximum width.
The minmax is very useful for creating responsive pages.
The grid-auto-rows specifies the size of an implicitly-created grid row track.
Based on our CSS code snippet above, this, therefore, means that every div we have in the grid container will have a height of 200px.
The grid-gap specifies the size of the space between the columns and the rows.
In our case, it’s 5px for both the space between columns and for the rows.
The grid-auto-flow property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
In our example, we are using the dense packing algorithm, which attempts to fill in holes earlier in the grid, if smaller items come up later.
commenting out that line will leave some empty spaces on our grid.
Uff!!.That was a long explanation for a few lines of code but hopefully, you picked up something.
Now let’s go ahead and complete our Photo Grid.
Let's ensure that all the images fit perfectly well in the divs.
Copy and paste the code below into our CSS file after the .
container class.
This will set the width and height of all images in our grid to 100% of their containers.
Finally, let’s style the divs with classes of .
verical , .
horizontal , and .
big .
Let’s talk about the CSS properties used in the code snippet above.
The grid-column CSS property is a shorthand property for grid-column-start and grid-column-end specifying a grid item's size and location within the grid.
The span keyword specifies the number of rows or columns a grid-column or grid-row should span.
In the example above, in order to make the length of some images twice as big, we set the grid-column for .
horizontal class to span 2 and and .
vertical to span 2 to make some images’ height twice as big as the rest.
Divs with .
big class have both their rows and columns span twice their original size.
Now open the index.
html in a browser and view your output.
If you’re interested in the entire code, find it on Github or view the complete product here.
The CSS Grid Layout has more properties that you will find interesting.
Dig deeper into Grid by reading the documentation .
Thanks for reading.
Cheers!!.