CSS Grid Layout Is The Layout Tool We’ve Always Needed

CSS Grid LayoutIn the early days of the web, everyone used HTML tables for layouts. At the time, it made sense. Print media has always made heavy use of grid layouts. The HTML table element was a straightforward way to bring some of the power of print media’s grids to web design. As we all know now, using HTML for page layout isn’t a good idea, and any designer who has been in the business long enough will remember tables nested within tables nested within tables, all of which was muddled up with the page’s content.

When CSS came along, we learned to separate design and content. Unfortunately, CSS’ layout tools were not great — they relied on low-level fiddling with nested divs, absolute positioning, and floats. The box model is not intuitive, and many a designer has lost hair trying to figure out why their divs refused to appear in the right place.

Most of us now use CSS frameworks that include some sort of grid, but they are a hack at best, and they still require us to clutter our HTML with multiple nested divs that indicate rows, columns, and other arcana like float clearing.

The CSS Grid module was created to bring true grid layouts to CSS without having to include layout instructions within HTML. Before I go into detail about CSS Grids, it should be noted that it is — as yet — not implemented in any browsers except for modern versions of Microsoft’s IE and Edge (an amusing reversal of the usual situation). However, there is a comprehensive CSS Grid Polyfill which allows you to start using CSS Grids right now.

CSS Grid Layout

What Can We Do With CSS Grids?

First, we’ll need some terminology.

Lines — A grid is composed of lines and the spaces between lines. Lines can be given names, which can then be referred to in CSS.

Tracks — Tracks are the spaces between lines. Both horizontal and vertical spaces are referred to as tracks.

Cells — A unit of the grid created by the intersection of tracks — think cells in a spreadsheet.

Areas — This is one of the cleverest parts of CSS Grids. Areas are rectangular groups of cells that can be given specific names. For example, if you wanted to create an area of a grid to contain footer content, you could give it the name “footer” and refer to it as that in CSS. This is especially useful for responsive design, because the name can be used to reposition elements in the grid.

Let’s take a look at a simple example (I’ve drawn liberally from Rachel Andrew’s excellent Grid By Example).

First, you need to create a grid wrapper, which is as simple as adding a class to a containing div.

.container {
display: grid;
grid-template-rows: 200px 200px;
grid-template-columns: repeat(4, 200px) ;
}

This should easy to understand. Using the class of the container div, we designate it as a grid using the display property. Then we create a set of two rows, each of which is 200px deep. The next line splits the grid into columns. Instead of entering 200px twice, we’ve used the repeat function to do it automatically. For this explanation, I’ve stuck to fixed width layout but they needn’t be, and the module can automatically size cells to the containing content.

So far so good, but how do we put content in our grid.

In the HTML we can add something like this:

<div class=”container”>
<div class=”one">Some text</div>
<div class=”two">Some text</div>
<div class=”three">Some text</div>
<div class=”four">Lots of text</div>
</div>

Now we can tell the browser where the content should be positioned on the grid:

.one {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
}
.two {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 3;
}
.three {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 3;
grid-column-end: 4;
}
.four {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 4;
}

In this example, I’ve defined positions according to line numbers, but that’s not essential; there are other ways of doing it.

After our simple example, we’d have a layout that looks like this.

Layout Tool

You’ll note that if we want to change the position of these elements to rearrange the page or in response to media queries, we can do it entirely in CSS by changing the row and column positions of the content, up to and including completely inverting the structure. That’s a massive improvement on both tables and current grid frameworks.

How Does CSS Grid Impact Flexbox?

For the most part, it doesn’t: they are intended for different purposes. Rachel Andrew’s quotes Tab Atkins explanation of the differences between the two:

Flexbox is for one-dimensional layouts – anything that needs to be laid out in a straight line (or in a broken line, which would be a single straight line if they were joined back together). Grid is for two-dimensional layouts. It can be used as a low-powered flexbox substitute (we’re trying to make sure that a single-column/row grid acts very similar to a flexbox), but that’s not using its full power.

CSS Grid Resources

I’ve barely scratched the surface of CSS Grid Layout. If you want to know more, I recommend these excellent resources.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED