This post is intended for experienced HTML developers who wants primer of CSS Grid. I wrote this post while going through the CSSGrid course by WesBos and it covers everything about CSS Grid, right from Fundamentals, Setting up the grid, Sizing and placing the grid items, repeat() function, auto-fit, auto-fill, minmax() function for responsive grids, grid template areas, autofit, alignment, centering, re-ordering, nesting of grids.

If you want an in-depth understanding, please enrol to this 4 hour, 25 video free course of CSS Grid by Wes Bos on cssgrid.io.

So… Let’s get started

A container can be made a grid by applying display:grid to it. When a container is made a grid, it’s immediate children automatically become griditems.

grid-template-columns will allow you to set explicit columns. If you pass 4 values as shown in the example below, it will make 4 columns of 100px each. grid-template-rows will allow you to set explicit rows.

grid-gap will allow you to define a gap between 2 grid items. Consider it like a gutter better 2 columns/rows.

When you are assigning the width or height to the grid-template-columns or grid-template-rows you can use pixel, ems, rems or percentage values and you can also use the newly introduced fr value. fr stands for fractional units and it resizes the grid item to take up whatever left over space is left.

repeat() allows you to setup repeats of columns/rows while using grid-template-columns or grid-template-rows property.

Grid items can span across various tracks in the grid. You can also specify where that item will start and where it will end.

auto-fit and auto-fill are 2 properties that will allow you to spread the grid and it’s tracks based on the viewport. When auto-fit or auto-fill is used with minmax() it can make a good combination to of responsive elements

You can assign custom names to sections of grid

We saw how we can position grid items on tracks based on track numbers but it is difficult to always comprehend what is the number of the track. So in order to avoid this you can also give custom names to the tracks.

grid-auto-flow: dense allows you to position grid items in the empty tracks irrespective of where they are in the markup hierarchy.

Aligning grid items is going to be an integral part of creating a webpage layout. CSS Grids gives you several options to layout the items and content.

You can use following style rules :

• Justify Items
• Align Items
• Justify Content
• Align Content
• Justify Self
• Align Self

Justify aligns the items along the row axis so I remember it as JR (Jayman & Rashmi [my best friend and now wife]), while Align sets the items on column axis so I remember it as AC (AirConditioner, as we both just cannot live without one). 😜

Let us see the difference between the three sets

Justify and Align items works on individual grid items

Justify and Align content works on all the grid items inside a grid

Justify and Align self works on a specific grid item

A grid item can also be a grid container. This enables us to nest grids and make interesting layouts. Here is an example of blog layout created by nesting grids

Peace ✌️