I’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 Layout
CSS 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.
Here is the photo grid we will build.
Alright, 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.html
As 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
.horizontal . we will be styling those divs differently. Now let’s head into styling our photo grid.
main.css let’s define the styles for our photo grid starting with the
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
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.
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.
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
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
.horizontal , and
Let’s talk about the CSS properties used in the code snippet above.
grid-column CSS property is a shorthand property for
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
.horizontal class to
span 2 and and
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.
The CSS Grid Layout has more properties that you will find interesting. Dig deeper into Grid by reading the
Thanks for reading. Cheers!!