Intro to Grids

The goal of this article is to get a general sense of how most grid systems work.

📘

What is a Grid System?

A structure comprising a series of horizontal and vertical lines, used to arrange content.

In web development, it is a way to lay out elements in a page, both vertically and horizontally.

It provides structure, both ensuring consistency between pages and making it easier to align different sections within a page.

Implementation

The basic element of the Grid is the column. A Grid's width can be divided by any number of columns (typically 12-16). The separation between columns is the gutter.

For instance, the following illustrates a 2-column grid with 20px gutters:

+----------------.grid-----------------+
|      +--------+      +--------+      |
| 20px |  .s1   | 20px |  .s1   | 20px |
|      +--------+      +--------+      |
+--------------------------------------+

If we define .s1 as a size 1 column (out of 2 columns), we could set its width as:

CSS

:root {
  --gutter: 20px;
  --totalColumns: 2;
}
.s1 {
  width: calc( (100% - var(--gutter) * 3) / var(--totalColumns) );
}

You can see a live example here.

A full width (2 out of 2 columns) would then be defined as:

CSS

.s2 {
  width: calc( 100% - var(--gutter) * 2 );
}

We can generalize it as:

CSS

.col {
  --columnWidth: calc(
    (100% - var(--gutter)*(var(--totalColumns) + 1)) / var(--totalColumns)
  );
  --guttersInGrid: calc(var(--column) - 1);

  width: calc(
    var(--columnWidth) * var(--column) +
    var(--guttersInGrid) * var(--gutter)
  );
}

You can see a live example here

There are many ways to define a grid, so this is not the only way to achieve it; but it highlights how we can generate columns with just CSS.

The example above works well for nestable grids. Whenever you create a new container a nestable Grid will define a new set of columns based on its size. A similar approach can be followed if you want to only define a top level Grid (using vw instead of %) so that nested Grids don't create their own sub Grid inside them.

Nested Grids are more common because they are easier to implement and to design for (more flexible) but the layout may not look as well structured as it would with a single top level Grid. There are trade offs to both approaches but it's ultimately a design decision.

Technology

Most systems strive for pure CSS solutions by defining a set of classes. There are 2 common approaches:

• Using floats and display: table like unigrid or this demo by Ryan Morr.
• Using flexbox like gymnast or Angular Material UI.

The table approach is the only option on older browsers but flexbox has become increasingly popular as the implementation is simpler and browser support is good (IE10+ with some caveats).

Common Features

Although there are no strict rules as to what composes a Grid system, there are some common features:

• Ability to justify content horizontally and vertically.
• Offset to add separation from previous elements.
• Automatic sizing: "fill the row with this element" if there's only one or "divide remaining space evenly" if there are more than one.

Why Use a Grid?

• Reduce CSS to write
• Standardize Layout creation
• Decouple Components from Layout
• Save time in implementing (and testing) layouts

When not to use a Grid?

• Designs don't follow a Grid (irregular columns or margins)
• Small product surface (not worth the abstraction)