Lets get into the basics of CSS Grid Layout Model

CSS is getting stronger and gives us much more power than a few years ago. It is difficult to miss the huge buzz about Flexbox recently. This powerful part of CSS is well supported in all modern browsers and you don’t have an excuse for not using it yet. I found it very helpful in some circumstances, but it’s definitely not the ideal candidate for building entire layouts. We tend to build them using floating or inline blocking elements, but it’s definitely not reason why these features were created. For me this is a broken idea, exactly the same like using fonts for icons. CSS never had a built in feature just for building layouts so we don’t have a much choice and we need to use these hacks. The good news is that CSS Grid Layout Model is just around the corner and I’m really looking forward to using it. Let’s dive into it together and rebuild some standard looking layout using some basic features of brand new model.

At the point of writing this article browser support for CSS Grid Layout Model is minimal. The only browsers that supports it are Edge and latest Internet Explorer. Luckily we have full implementation of that feature in Google Chrome, not as a default setting though. The only thing that we need to do is to switch the ‘Enable experimental Web Platform’ flag and restart the browser.

Enable experimental Web Platform Flag

Standard blog layout revisited

A few years ago it was close to impossible to visit a blog without header on top, content section and narrow sidebar under neath followed by a footer. Despite many discussions about the existence of the sidebar, this is still a very popular blog layout and it’s going to work well as an example.

Standard blog layout

Gridy terminology

Before we go any further it’s necessary to mention a little bit of related terminology. Easy, just few new words, hopefully your brain won’t explode. Knowledge of these few terms will make your further grid exploration much easier.

Grid container

Grid container establishes a new grid formatting context for its contents. Essentially, it is our parent selector which is forming the boundaries of inner grid items.

CSS Grid container

Grid lines

Grid lines are the horizontal and vertical dividers. We are going to use them to describe grid tracks, grid cells and grid areas. They have a numerical index, or optionally we can give them a specific name.

CSS Grid lines

Grid track

Grid track is a vertical or horizontal space between two lines.

CSS Grid track

Grid cell

Grid cell is the item between two adjacent horizontal and two adjacent vertical grid lines. It is the smallest unit that we can put content into.

CSS Grid cell

Grid area

Grid area is very similar to grid cell, it’s bounded by any two horizontal and two vertical grid lines (not necessarily adjacent). Theoretically speaking, grid cell is the smallest form of grid area.

CSS Grid area

It’s all about grid areas between grid lines

Enough of boring theory now, lets get our hands dirty with some code. This is the markup of our super complex example.

<div class="blog">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

Finally the exciting part. To enable grid layout we need to apply grid value for display property. For additional settings I’m going to use absolute values (pixels) just for simplicity of my example, but in real life scenario it’s probably a better idea to use some relative values (percentage, ems, rems, vw or vh). New properties grid-template-columns and grid-template-rows will split grid container for few grid tracks. You can easily use auto instead of fixed values for these properties. Look at the code and compare applied values with the picture below.

.blog {
  display: grid;
  grid-template-columns: 400px 20px 180px;
  grid-template-rows: 100px 20px 210px 20px 100px;
}

CSS grid template columns and rows

Time to define how our grid looks. Examine carefully the code below. Hopefully the image below the snippet of code will make your life easier.

.header {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 4;
}
.content {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 2;
}
.sidebar {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 4;
}
.footer {
  grid-row-start: 5;
  grid-row-end: 6;
  grid-column-start: 1;
  grid-column-end: 4;
}

CSS grids lines

Hopefully that makes sense. To simplify our code, can can use a handy short notation.

.header {
  grid-row: 1 /2;
  grid-column: 1 /4;
}
.content {
  grid-row: 3 /4;
  grid-column: 1 /2;
}
.sidebar {
  grid-row: 3 /4;
  grid-column: 3 /4;
}
.footer {
  grid-row: 5 / 6;
  grid-column: 1 / 4;
}

How about even shorter? grid-area follows this order: grid-row-start, grid-column-start, grid-row-end, grid-column-end.

.header {
  grid-area: 1 / 1 / 2 / 4;
}
.content {
  grid-area: 3 / 1 / 4 / 2;
}
.sidebar {
  grid-area: 3 / 3 / 4 / 4;
}
.footer {
  grid-area: 5 / 1 / 6 / 4;
}

And finally the result looks like this. Feel free to fork the codpen example and play around with it.

.wrapper {
  display: grid;
  grid-template-columns: 400px 20px 180px;
  grid-template-rows: 100px 20px 210px 20px 100px;
}
.header {
  grid-area: 1 / 1 / 2 / 4;
}
.content {
  grid-area: 3 / 1 / 4 / 2;
}
.sidebar {
  grid-area: 3 / 3 / 4 / 4;
}
.footer {
  grid-area: 5 / 1 / 6 / 4;
}

See the Pen 2015-10-04 Lets get into basics of CSS Grid Layout Model by Pawel Grzybek (@pawelgrzybek) on CodePen.

Whats next?

Hopefully this very easy example gives you an idea of how upcoming CSS Grid Layout Model works. It’s good fun to play around with things that will become a daily routine in few years time. I highly recommend you to dive deeper into the specifications because it comes with much more super useful features that has been presented in this article. If you are more visual learner check amazing talk from CSSconf EU 2014, CSS Grid Layout by Rachel Andrew. Let me know what you think about it. I’m keen to see your CSS grid experiment results.