Syracuse University Syracuse University
Digital Design System

CSS Grid

Utilities for common CSS grid layouts

CSS Grid is powerful layout tool - as it is a two dimensional system. Both rows and columns can be specifically defined. For an in-depth overview of css grid and all its properties, a good resource is the MDN documentation. It may be helpful to understand css grid prior to using these utilities.

Although it is to the developer's discretion on whether flexbox or css grid is more appropriate for specific use cases, the following suggestions are for when css grid is the better option.

  • You need a layout-first design: A good use case for page template layout. CSS grid makes is easy to create grid sections for a header, sidebar, page content, and footer.
  • You have a complex design to implement: The two-dimensional layout system here is perfect to create a complex designs, such as tiled grids and masonry style layouts that display a gallery of images or content cards.
  • You need to have a gap between block elements: A very helpful aspect of css grid is the ability to define a gap between rows or columns very easily, without having to use the margin property, which can cause some side effects especially if working with many breakpoints.
  • You need to overlap elements: Overlap elements using CSS grid is very easy, you just need to use the grid-column and grid-row properties and you can have overlapping elements very easily. On the other hand, with Flexbox we still need to use some hacks such as margins, transforms, or absolute positioning.

To first get started with CSS grid, you will first need to add the class .grid to the parent container. All children within this container will adhere to how the grid is defined.

Grid Columns

To organize your grid into columns the .grid-columns-{x} class will need to be added to the parent container.

Much like the flexbox grid, the css grid is also based on a 12 column system. To define the number of columns you desire you would add a number - from 1 through 12 - to the .grid-columns-{x} class.

In the following example the class .grid-columns-3 will give 3 equally sized columns to the grid.

1
2
3
4
5
6 
<div class="grid grid-columns-3 grid-columns-gap-3 grid-rows-gap-3 background-blue-primary-10 padding-4">
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">2</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">3</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">4</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">5</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">6</span>
    </div>
</div>

Spanning Grid Columns

In addition to having equally sized columns, you are able to define some blocks as spanning multiple columns. To do so, you first define your grid columns on the parent container. Next, you add the class .grid-columns-span-{x}, with x being the number of columns you wish to span - to the child element. The values that are available to use are 1 through 12.

In the following example, block 2 and block 6 have the class .grid-columns-span-2, which will have each span 2 columns out of the 4 columns in the grid.

1
2
3
4
5
6 
<div class="grid grid-columns-4 grid-columns-gap-3 grid-rows-gap-3 background-blue-primary-10 padding-4">
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="grid-columns-span-2 background-blue-medium padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">2</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">3</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">4</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">5</span>
    </div>
    <div class="grid-columns-span-2 background-blue-medium padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">6</span>
    </div>
</div>

Grid Column Start/End

Use the .grid-columns-start-{x} and .grid-columns-end-{x} utilities to make an element start or end at a specifically grid line. These can also be combined with the .grid-columns-span-{x} utilities to span a specific number of columns.

Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7. The values that are available to use are 1 through 13.

In the following example we are using the class .grid-columns-start-2 and .grid-columns-span-4 on block #1 to have it start at the second column and span 4 columns.

1
2
3
4 
<div class="grid grid-columns-6 grid-columns-gap-3 grid-rows-gap-3 background-blue-primary-10 padding-4">
    <div class="background-blue-medium-70"></div>
    <div class="grid-columns-start-2 grid-columns-span-4 background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="background-blue-medium-70"></div>
    <div class="grid-columns-start-1 grid-columns-end-3 background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">2</span>
    </div>
    <div class="background-blue-medium-70"></div>
    <div class="background-blue-medium-70"></div>
    <div class="grid-columns-start-5 grid-columns-span-2 background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">3</span>
    </div>
    <div class="grid-columns-start-1 grid-columns-end-7 background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">4</span>
    </div>
</div>

Grid Auto Columns

Use the .grid-auto-columns-{keyword} utilities to control the size implicitly-created grid columns. This works best when combining with the .grid-auto-flow-x class.

Class Properties
.grid-auto-columns-auto grid-auto-columns: auto;
.grid-auto-columns-min grid-auto-columns: min-content;
.grid-auto-columns-max grid-auto-columns: max-content;
.grid-auto-columns-fr grid-auto-columns: minmax(0, 1fr);
1
2
3
4
5 
<div class="grid grid-auto-columns-fr grid-auto-flow-column grid-columns-gap-6 grid-rows-gap-3 background-blue-primary-10 padding-4">
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">2</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">3</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">4</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">5</span>
    </div>
</div>

Grid Rows

Similar to grid columns, .grid-rows-{x} will create equally sized rows. The available row values are 1-12. When combined with the .grid-auto-flow-column, your rows into columns when the number of children exceeds the number of rows you have specified.

1
2
3
4
5
6 
<div class="grid grid-rows-3 grid-auto-flow-column grid-columns-gap-3 grid-rows-gap-3 background-blue-primary-10 padding-4">
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class='is-bold font-size-8'>2</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class='is-bold font-size-8'>3</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class='is-bold font-size-8'>4</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class='is-bold font-size-8'>5</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">6</span>
    </div>
</div>

Spanning Grid Rows

Spanning rows is very much the same as spanning columns. To have a child element span multiple rows, add a class of .grid-rows-span-{x} to the child, with x being the number of rows you wish to span.

1
2
3
4 
<div class="grid grid-rows-3 grid-auto-flow-column grid-columns-gap-3 grid-rows-gap-3 background-blue-primary-10 padding-4">
    <div class="grid-rows-span-3 background-blue-medium padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">2</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">3</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">4</span>
    </div>
</div>

Grid Row Start/End

Use the .grid-rows-start-{x} and .grid-rows-end-x utilities to make an element start or end at a specified grid line. These can also be combined with the .grid-rows-span-{x} utilities to span a specific number of rows.

Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.

1
2
3
4 
<div class="grid grid-rows-3 grid-auto-flow-column grid-columns-gap-3 grid-rows-gap-3 background-blue-primary-10 padding-4">
    <div class="background-blue-medium"></div>
    <div class="grid-rows-start-2 grid-rows-span-2 background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="grid-rows-start-1 grid-rows-end-4 background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">2</span>
    </div>
    <div class="grid-rows-start-1 grid-rows-end-3 background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">3</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">4</span>
    </div>
</div>

Grid Auto Rows

Use the .grid-auto-rows-{keyword} utilities to control the size implicitly-created grid rows.

Class Properties
.grid-auto-rows-auto grid-auto-rows: auto;
.grid-auto-rows-min .grid-auto-rows-min
.grid-auto-rows-max grid-auto-rows: max-content;
.grid-auto-rows-fr grid-auto-rows: minmax(0, 1fr);
1
2
3 
<div class="grid grid-auto-rows-min grid-auto-flow-row grid-columns-gap-3 grid-rows-gap-3 background-blue-primary-10 padding-4">
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">2</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">3</span>
    </div>
</div>

Grid Auto Flow

Use the .grid-auto-flow-{keyword} utilities to control how the grid auto placement flows.

Class Properties
.grid-auto-rows-auto grid-auto-rows: auto;
.grid-auto-flow-column grid-auto-flow: column;
.grid-auto-flow-row-dense grid-auto-flow: row dense;
.grid-auto-flow-column-dense grid-auto-flow: column dense;
1
2
3
4
5
6 
<div class="grid grid-rows-3 grid-auto-flow-column grid-columns-gap-3 grid-rows-gap-3 background-blue-primary-10 padding-4">
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">2</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">3</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">4</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">5</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">6</span>
    </div>
</div>

Grid Gap

The classes .grid-columns-gap-{x} and .grid-rows-gap-{x} controls the gutter between rows and columns. Gap sizes are based on the same spacing standards as used by margins and padding.

1
2
3
1
2
3
1
2
3 
<div class="grid grid-columns-3 grid-columns-gap-2 background-blue-primary-10 padding-3">
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">2</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">3</span>
    </div>
</div>
<div class="grid grid-columns-3 grid-columns-gap-3 background-blue-primary-10 padding-3">
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">2</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">3</span>
    </div>
</div>
<div class="grid grid-columns-3 grid-columns-gap-4 background-blue-primary-10 padding-3">
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">1</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">2</span>
    </div>
    <div class="background-blue-primary padding-4 text-white text-align-center">
        <span class="is-bold font-size-8">3</span>
    </div>
</div>

Grid Nesting

The true power of css grid is the ability to create layouts where you can combine the ability of adding rows and columns in complex arrangements. Nesting your grid allows you to add rows inside of a column or vice versa.

To nest your grid, you will just need to add the class of .grid to your child elements, and then any other grid utility to that child.

In the following example, we have defined a grid with 2 grid columns. In the first column there are 2 columns inside of it. The second column has 3 grid rows.

1
2
3
4
5 
<div class="grid grid-columns-2 grid-columns-gap-3 background-blue-primary-10 padding-3">
    <div class="grid grid-columns-2 grid-columns-gap-3">
        <div class="background-blue-primary padding-4 text-white text-align-center">
            <span class="is-bold font-size-8">1</span>
        </div>
        <div class="background-blue-primary padding-4 text-white text-align-center">
            <span class="is-bold font-size-8">2</span>
        </div>
    </div>
    <div class="grid grid-rows-gap-3">
        <div class="background-blue-primary padding-4 text-white text-align-center">
            <span class="is-bold font-size-8">3</span>
        </div>
        <div class="background-blue-primary padding-4 text-white text-align-center">
            <span class="is-bold font-size-8">4</span>
        </div>
        <div class="background-blue-primary padding-4 text-white text-align-center">
            <span class="is-bold font-size-8">5</span>
        </div>
    </div>
</div>

Responsive Grid Utilites

Like the flexbox grid utilities, the css grid utilities are also responsive. To make any css grid utility responsive, simply adding a design system breakpoint. For example, .grid-md will add display: grid to a parent container on viewports md and up.

In the following example, layout is separated into columns and rows on viewports 1012px and larger. On viewports smaller than 1012px, each box collapses down to evenly sized rows. This is achieved by adding .grid-columns-2-lg onto the parent element and on the first child column. The size of the rows are also controlled by .grid-rows-4-lg on the second column and .grid-rows-span-3-lg on the first child of the second column.

1
2
3
4 
<div class="grid grid-columns-2-lg grid-columns-gap-3 grid-rows-gap-3 background-blue-primary-10 padding-3">
    <div class="grid grid-columns-2-lg grid-columns-gap-3 grid-rows-gap-3">
        <div class="background-blue-primary padding-4 text-white text-align-center">
            <span class="is-bold font-size-8">1</span>
        </div>
        <div class="background-blue-primary padding-4 text-white text-align-center">
            <span class="is-bold font-size-8">2</span>
        </div>
    </div>
    <div class="grid grid-rows-gap-3 grid-rows-4-lg">
        <div class="grid-rows-span-3-lg background-blue-primary padding-4 text-white text-align-center">
            <span class="is-bold font-size-8">3</span>
        </div>
        <div class="background-blue-primary padding-4 text-white text-align-center">
            <span class="is-bold font-size-8">4</span>
        </div>
    </div>
</div>