The Ultimate Guide To CSS Grid

During the last two months I’ve been taking a deeper look into CSS Grid. In this tutorial I want to share the key findings. To make things easier, I explained them using visual diagrams.

All diagrams are taken from CSS Visual Dictionary book. You can get it below.

My Coding Books

To get more tutorials follow me on Twitter — I also post free book giveaways.

To get a good idea of how flex works try flex layout editor on this page.

You are probably already familiar with CSS box model for regular elements. Let’s begin with a similar “bird’s eye view” representation for the CSS Grid:

CSS Grid Anatomy is composed of the primary container which is just your standard <div> element that has a margin, border and padding. To make a parent CSS grid container out of any element add display: grid to it. Grid’s items are children nested inside the parent container. They are usually defined as a list of elements that could represent a header, sidebar, footer or similar website layout elements, depending on your application design.

In this case there are 3 <div> items. Third one is stretched across 2 cells.

Notice lines can be counted backwards too using negative coordinate system.

The grid above is 5 by 4 cells in dimension. It is defined as follows:

div#grid {               /* This is our CSS grid…