Grid Columns

Description

A series of CSS Grid column utilities, which allow nesting and have responsive helpers.

Setup

The required $structure map (Setup).

Output

Based on the reference config mentioned in this guide, we'd get the following in our CSS:

.grid {
  display: grid;
  column-gap: var(--inner-gutter);
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

.col,
[class*=col-] {
  grid-column: span var(--grid-columns);
}

.col-1 {
  --grid-columns: 1;
  grid-column: span 1;
}

.col-2 {
  --grid-columns: 2;
  grid-column: span 2;
}

.col-3 {
  --grid-columns: 3;
  grid-column: span 3;
}

/* ... up to the maximum amount of columns specified in $structure.columns */

Note: Each col- class includes a CSS variable - this allows nesting of CSS grids and colspan- classes. See nesting.

Demos

Using .grid and .col-x classes:

<ul class="grid grid-demo">
  <li class="col-1"></li>
  <li class="col-2"></li>
  <li class="col-3"></li>
  <li class="col-4"></li>
  <li class="col-5"></li>
  <li class="col-6"></li>
  <li class="col-7"></li>
  <li class="col-8"></li>
  <li class="col-9"></li>
  <li class="col-10"></li>
  <li class="col-11"></li>
  <li class="col-12"></li>
</ul>

There is a helper class of .grid to use the col-X classes:

.grid {
  display: grid;
  column-gap: var(--inner-gutter);
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

You can see it sets up display: grid, it also assumes you'll want a gutter spacing and sets up the maximum amount of columns. As it uses variables for gutter and total columns, these will be updated per breakpoint.

The CSS for these docs contains a .grid-demo class to add some color, spacing and to display the classname of the columns.

Responsive columns

The $structure.columns specified in this build has:

$structure: (
  columns: (
    xs: 4,
    sm: 4,
    md: 8,
    lg: 12,
    xl: 12,
    xxl: 12
  ),
);

And so, if you resize the browser, you can see that on smaller breakpoints, the grid items set to be wider than the maximum amount of columns at the breakpoint can break the display. Fortunately we can use col-X classes with breakpoint helpers:

<ul class="grid grid-demo">
  <li class="col-1 col-3@md col-4@lg col-5@xl col-6@xxlarge"></li>
</ul>

If you don't define anything at xs then the column will be 100% wide:

The breakpoints helpers are breakpoint up - so col-4@lg would apply a 4 column spanning at lg and every breakpoint larger than that:

Wrapping and gap-y-gutter usage

Same col class on every item, wrapping, using gap-y-gutter Spacing utility:

Indenting

Indenting a col (alt):

Not setting a col width, just start and ends:

Alternative grids

Need a random 10 column grid?

.grid-demo--10 {
  --grid-columns: 10;
}

Need a random 24 column grid?

.grid-demo--24 {
  --grid-columns: 24;
}

Nesting

Nesting .grid/.col-x and .colspan (docs):

Notes

As you can see, this generates a lot of CSS classes - you will want to purge your CSS of unused classes to remove any of these that you don't use.

Alternatively, if you don't want to generate the CSS classes, see CSS-Class-Generation.