CSS Grid Layout is a new layout system that has become more viable in the recent past (at least as of March 2017). It is now supported in all major evergreen browsers and with browser prefixes in lesser browsers (IE 10-11). You can view more specifics about cross-browser support here: https://caniuse.com/#feat=css-grid

This new layout system allows us to create 2-dimensional (row & col) layouts similar to the table layout. The main differences are that it is much easier to use and enables more possibilities. I’ll give a brief overview of the layout system and then jump into the utility classes that I created to support it. For a more in-depth look you should checkout css-tricks and MDN.

How to Grid

The first step is to set the container to use the grid layout and specify the number of rows and columns and the gutter size.

.grid-12x12 {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(12, 1fr);
  grid-template-columns: repeat(12, 1fr);
}

You don’t have to define an even grid. You could specify the size of each track for the rows and columns. For this example I want to use equally sized rows and columns so we use the handy CSS function repeat. For the basic usage you define the number of tracks and a width and it generates them for you. The fr unit is a new type of unit that represents a fraction of the available space in the grid container. Since we used 1fr it will evenly distribute the available space to the tracks (e.g. equal cell sizes).

The next step is to set the span of a cell.

.cell-size-2x3 {
  grid-row-end: span 2;
  grid-column-end: span 3;
}

You can explicitly set the end index (even using named tracks) but for the utility classes it is easier to keep the size separate from the position so we just indicate its length with a span # where # is the number of tracks (cells) to span. Without setting the start index the cells will be automatically positioned using the grid auto-placement algorithm. You have some control over the direction of the flow of the auto-placement (row or col) but you should do some further research if you want to rely on it. For this example we will be setting the position explicitly.

Next we set the position of the cell.

.cell-pos-3x2 {
  grid-row-start: 3;
  grid-column-start: 2;
}

Here we are setting the start index explicitly. This defines where the upper left corner of the cell will be. It is sort of like absolute positioning except that you are targeting tracks by index or name instead of using pixels. You can even overlap cells just like you can overlap absolutely positioned elements.

Utility Classes

To make life easier, I created utility classes for a grid display layout that is similar to how bootstrap provides a grid layout system. The goal is to enable a developer to quickly stamp out grids without having to write repetitive CSS.

There are basically 3 types of classes.

  • .grid-{R}x{C}: Specifies the dimensions of the grid where {R} is the number of rows and {C} is the number of columns.
  • .cell-size-{R}x{C}: Specifies the size of the cell where {R} is the number of rows (height) to span and {C} is the number of columns (width) to span.
  • .cell-pos-{R}x{C}: Specifies the position of the cell where {R} is the row index (y-coordinate) and {C} is the column index (x-coordinate).

It supports up to a 12x12 grid and has the applicable browser prefixes for IE. There is also a .grid-window class if you want it locked to the window size.

It would be a bit large to paste on the page but you can download it here or see it in action bellow.

Tags:
  1. CSS

Erik Murphy

Erik Murphy

Erik is an agile software developer in Charlotte, NC. He enjoys working full-stack (CSS, JS, C#, SQL) as each layer presents new challenges. His experience involves a variety of applications ranging from developing brochure sites to high-performance streaming applications. He has worked in many domains including military, healthcare, finance, and energy.