CSS Grid Layout

CSS Grid has taken over the world of web design since its introduction. It’s cool and awesome. There are plenty of tutorials, blogs and articles on the internet, which are great source of learning. However, majority of them are going to teach you the basics with no real examples. So my advice for this blog is to go ahead and learn the basics from those blogs before go ahead with this blog.

CSS Grid allows us to write better layouts using in browser capability of grids. Prior to CSS Grid, we use to have either our own custom grid system or used something like bootstrap. While they are great but CSS grid takes the pain out of most the things we face in those solutions.

CSS Grid makes it a piece of cake in developing simple and complex layouts. In this blog we will learn some basic terminologies and then go ahead with simple layout example.

The basic terminologies associated with CSS Grids are below:

1. Columns
2. Rows
3. Cells
4. Grid Lines
5. Gutter

As you can see in the diagram above, all the terminologies are explained pretty well. Above example is a 3x2 column grid which means 3 columns and 2 rows.

Now the basic concepts are out of the way we are going to use these concepts into example layout. We are going to built example layout like below:

As it can be seen there is a header, a footer then center row has 3 columns with nav in first column sidebar on the right and main content area in the center which occupies most of the area.

Below is the sample html for this example.

Now html is out of our way lets dig into CSS part. First and for most, lets give it some styling so that our html looks like above. These css rules are not part of css grid, you can omit if you want.

As you can see I am styling all the items inside wrapper container. I am setting its background color to orange giving bottom and right margins. Giving display flex just to align items dead center by setting justify-content and align-items to center .

Next, lets get into the CSS grid part of it.

In above piece of code we are setting display to grid hence the title of this topic. That is how we convert a container into grid . Next we set columns and rows and the way we do it is by using grid-template-columns and grid-template-rows properties. grid-template-columns allows us to set number of columns with its appropriate width . grid-template-rows allows us to set number of rows with its appropriate height . In example above, there are 3 columns with first column taking 1 fraction , second column taking 5 fraction and third column 2 fractions . Whereas A single fraction unit means “one piece of however many pieces we are splitting this into” .

The same applies to rows , As there are three rows i.e. first row contains header which takes the entire row mean all three columns, second row takes nav, contents and aside whereas footer goes to the third and last row takes up all three columns.

This means the first and the last rows takes same amount of height i.e. 5 fractions . Whereas the center row takes the rest of the remaining height.

Next we also give gutter of 10px. The way we do it in CSS Grid is by using grid-gap property. Lastly, we give a height to wrapper container.

If we take a look at it in the browser this will yield a result, we are looking for which is below:

Now to make it look more the way want it to be is to be setting some properties to header and footer. We are going to tell header and footer to take up their entire rows.

And the way we are going to use it is by using grid-column-start and grid-column-end properties.

As you can see both header and footer starts from grid line 1 and ends grid line 4. This allows them to take up the entire rows. This will yield the exact output we are looking forward as below.

The entire code is below for this example.

That is it for this blog. Please keep following for more blogs. If you liked in don’t forget to clap it. If you have question then comment below.