Things I’ve learned about CSS grid layout

Photo by Julie Tupas on Unsplash

With CSS Grid you can create complex web designs. It is very intuitive and very well supported by the major browsers. In this article I will show how to build layouts in CSS Grids.

Setting Up CSS Grid

It is very simple to get CSS Grid up and running. First of all I would recommend to download Firefox’s Developer Edition. Firefox has some great Dev Tools included, which makes it very easy to examine the CSS grid.

Here is the markup for a container (parent) with six items (children) in it:

HTML

<div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
  </div>

To turn our container div into a grid, we give it a display of grid:

CSS

.container {
    display: grid;
}

But, this doesn’t do anything yet, as we haven’t defined how we want our grid to look like. It’ll position six divs on top of each other.

Defining Columns and Rows

To make it two-dimensional, we’ll need to define the columns and rows. Let’s create three…