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.

See the Pen Grid Basics by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

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.

See the Pen Assigning Width & Height to Grid Items by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

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

See the Pen vYNZwGz by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

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

See the Pen Spanning Grid Items across Tracks by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

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

See the Pen auto-fit and auto-fill by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

You can assign custom names to sections of grid

See the Pen Custom names for the sections of grid by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

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.

See the Pen Custom names for grid tracks by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

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

See the Pen grid-auto-flow: dense by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

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

See the Pen Aligning grid items (Justify & Align Items) by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

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

See the Pen Aligning grid items (Justify & Align Content) by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

Justify and Align self works on a specific grid item

See the Pen Aligning grid items (Justify & Align Self) by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

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

See the Pen Nested Grids by Jayman fighting CoVID-19 by staying at home (@jayman-pandya) on CodePen.

Peace ✌️