How to get Started with the CSS Grid Layout

Ohans Emmanuel

Published in

Flexbox and Grid

6 min readApr 9, 2017

What you’ll learn:

How to Get a CSS Grid Supported Browser
How to Kick off the Grid formatting context
Understand the basics of Grid Rows and Columns
Take a first look at the new fractional unit(fr)
Work your way through Nested Grids

Aye! Let’s get started.

If you don’t know what CSS Grid is, in a nutshell, it is a relatively new standard for crafting page layouts in CSS.

Step #1: Get a CSS Grid Supported Browser

At the time of this writing, the browser support for CSS Grids isn't particularly awesome. However, that doesn't stop you from trying it out today.

ACTION: Update your Chrome, Firefox, Safari or Opera browser, or just download the latest Firefox or Chrome

Step #2: Know the Fundamentals of the Grid Layout

As with everything in life, knowing the fundamentals will save you a lot of hassles down the line.

ACTION: Read and Code Along

Consider the markup below:

<body>
  <aside></aside>
  <main></main>
</body>

Simple page layout. Nothing complex — yet.

For visual aid, and because no one loves ugly examples, give the body element some color:

body {
  background-color: rgba(26,188,156 ,1);
}

Here’s the result of that:

I reckon you didn't come this far to make big green screens — So, let’s spice things up.

Add some content to both aside and main

<body>
  <aside>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  </aside>  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <p>Interdum varius sit amet mattis. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Mattis aliquam faucibus purus in massa tempor nec feugiat. Neque egestas congue quisque egestas diam in arcu cursus.</p> 
    <p>Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Quam id leo in vitae turpis. Blandit libero volutpat sed cras. Tellus at urna condimentum mattis pellentesque. Mollis nunc sed id semper. Volutpat commodo sed egestas egestas fringilla phasellus faucibus. Commodo odio aenean sed adipiscing diam donec adipiscing. Faucibus et molestie ac feugiat sed. Turpis nunc eget lorem dolor sed viverra ipsum nunc aliquet.</p><p>Auctor eu augue ut lectus arcu bibendum at varius. Scelerisque eu ultrices vitae auctor eu augue ut lectus arcu. Augue interdum velit euismod in. Arcu felis bibendum ut tristique. Ullamcorper a lacus vestibulum sed arcu.  Maecenas sed enim ut sem. Eu turpis egestas pretium aenean pharetra. Condimentum lacinia quis vel eros donec ac.</p>
  </main>
</body>

By choice, the main content area has more texts than the aside

Give both content areas some style:

aside, 
main {
  background-color: #fff;
  padding: 10px;
}

And here’s the result of that:

Fundamentals #1: Kick off the Grid formatting context

Like Flexbox, using the Grid layout begins with setting a grid-container. Forget the lingo, it’s easier than you think.

body {
  display: grid;
}

The body element is the container element — houses both aside and main

Setting `display: grid` on the `body` element doesn’t seem to have triggered any changes.

Fundamentals #2: Grid Rows and Columns

A grid, in it’s most basic form comprises rows and columns. To get any reasonable benefits off of the Grid layout, you do have to define how either the rows or columns will be laid out.

Let’s have the aside and main section appear side-by-side. Essentially, a two-column grid.

body {
  grid-template-columns: 20% 80%;
}

grid-template-columns is a grid property. I don’t expect you to understand what it does.

grid-template-columns defines how the columns within the grid are laid. How wide they should be, or in what proportions they should be laid. In this example, the first column has been defined to have a width of 20% and the other, 80%.

For legibility, you may also put some space between the columns.

body {
  grid-column-gap: 15px;
}

grid-column-gap is also a new property — one you may not have seen before now. It defines spacing (or gaps) between columns.

If you paid close attention, you must have noticed something weird.

The aside is given a width of 20% and main, 80%. The sum of that is 100% . The grid-column-gap has a width of 15px too — that’s an extra 15px . The total width of the layout now exceeds 100% (20% + 80% + 15px). This creates a weird spacing and a horizontal scroll bar to view the extra 15px of content.

Let’s fix this.

Fundamentals #3: The fractional unit

The fractional unit fr is new to CSS. Unlike other units of measurement in CSS, it plays a significant role in creating reasonable grid layouts.

The problem discussed in “fundamentals #2” above, may be easily solved by using the fractional unit.

body {
  grid-template-columns: 1fr 4fr;
  grid-column-gap: 15px;
}

Instead of using widths of20% and 80%, I have replaced those with 1fr and 4fr respectively.

So, what’s happening here?

The grid-column-gap is assigned a width of 15px The remaining available space within the container is then split in proportions of 1:4, thanks to the fractional unit (fr). 1fr and 4fr respectively.

If this is confusing, that’s normal. Take a deep breadth, read Fundamentals #3 again, and you’ll get a better feel for how it works.

Fundamentals #4: Nested Grids

Grids can also be nested.

Delete all the content within the main content area and insert four empty paragraph tags.

<main>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </main>

Make main a grid container too.

main {
  display: grid;
}

Simple enough.

Now define the placement of the rows and columns. How about 2 columns ?

main {
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

The code above, creates two columns with equal dimensions and a gap of 20px.

Notice that the declaration says grid-gap NOT grid-column-gap or grid-row-gap. grid-gap creates gaps across both rows and columns.

By the way, there’s a 10px padding for both aside and main elements.

You may also define the sizes of the rows:

main {
  grid-template-rows: 100px 150px;
}

The first row has been defined to have a height of 100px, and the second, 150px. As a reminder, rows run from left to right, and columns from top to bottom — by default.

I hope that wasn't a lot to take in at once. Now you have a grasp of the fundamentals!