#Grid Templates

A series of utility classes that provide an easy abstraction over CSS grid.

#Basics

The basic idea of CSS grid is to use it as a way to lay out elements on a page, like so.

<div class="grid u-gap-2 u-text-center font-bold">
    <div class="grid-c-12 bg-indigo-200 text-indigo-700 u-round-xs" style="">
        <p>Header</p>
    </div>
    <div class="grid-c-4 grid-r-6 bg-indigo-200 text-indigo-700 u-round-xs" style="">
        <p>Sidebar</p>
    </div>
    <div class="grid-c-8 grid-r-3 bg-indigo-200 text-indigo-700 u-round-xs" style="">
        <p>Main Content</p>
    </div>
    <div class="grid-c-4 grid-r-3 bg-indigo-200 text-indigo-700 u-round-xs" style="">
        <p>Sub Content</p>
    </div>
    <div class="grid-c-4 grid-r-3 bg-indigo-200 text-indigo-700 u-round-xs" style="">
        <p>Sub Content</p>
    </div>
    <div class="grid-c-12 bg-indigo-200 text-indigo-700 u-round-xs" style="">
        <p>Footer</p>
    </div>
</div>

Before diving into how templates work, let's take a look at the building blocks of CSS grid.

Inside a grid layout consists of elements of varying row and column spans. For now, any element you add inside of a grid layout will take up 1 unit of space.

For example, if we define a layout using grid grid-rows-2, a single div will use slot 1 of 2 of the columns. Adding another div will use slot 2 of 2. Adding any more will just overflow onto the next row. See below for more info.

#Template Sizes - Columns

By default, the default grid class supports up to 12 columns. To change this, you can use any of the grid-cols-[1-12] classes.

--grid-template-column: repeat(1, minmax(0, 1fr));

--grid-template-column: repeat(2, minmax(0, 1fr));

--grid-template-column: repeat(3, minmax(0, 1fr));

--grid-template-column: repeat(4, minmax(0, 1fr));

--grid-template-column: repeat(5, minmax(0, 1fr));

--grid-template-column: repeat(6, minmax(0, 1fr));

--grid-template-column: repeat(7, minmax(0, 1fr));

--grid-template-column: repeat(8, minmax(0, 1fr));

--grid-template-column: repeat(9, minmax(0, 1fr));

--grid-template-column: repeat(10, minmax(0, 1fr));

--grid-template-column: repeat(11, minmax(0, 1fr));

--grid-template-column: repeat(12, minmax(0, 1fr));

Supported Pseudo-Variants

See more pseudo-variants.

As another example, let's use a grid of 3 columns with the grid-cols-3 class.

<div class="grid grid-cols-3 u-gap-2">
    <div>
        <p>1</p>
    </div>
    <div>
        <p>2</p>
    </div>
    <div>
        <p>3</p>
    </div>
    <div>
        <p>4</p>
    </div>
    <div>
        <p>5</p>
    </div>
    <div>
        <p>6</p>
    </div>
    <div>
        <p>7</p>
    </div>
    <div>
        <p>8</p>
    </div>
    <div>
        <p>9</p>
    </div>
</div>

If you want to specify the number of rows a grid has, then you must use the grid-cols-[1-12] class. By default, a grid has grid-template-rows set to auto.

<div class="grid grid-rows-3 grid-cols-2 grid-flow-col u-gap-2 font-bold">
  <div class="u-text-center p-2 u-round-xs bg-orange-200 text-orange-700">1</div>
  <div class="u-text-center p-2 u-round-xs bg-orange-200 text-orange-700">2</div>
  <div class="u-text-center p-2 u-round-xs bg-orange-200 text-orange-700">3</div>
  <div class="u-text-center p-2 u-round-xs bg-orange-200 text-orange-700">4</div>
  <div class="u-text-center p-2 u-round-xs bg-orange-200 text-orange-700">5</div>
</div>

#Template Sizes - Rows

By default, the default grid class supports up to 6 rows. To change this, you can use any of the grid-rows-[1-6] classes.

--grid-template-row: repeat(1, minmax(0, 1fr));
grid-template-rows: var(--grid-template-row);

--grid-template-row: repeat(2, minmax(0, 1fr));
grid-template-rows: var(--grid-template-row);

--grid-template-row: repeat(3, minmax(0, 1fr));
grid-template-rows: var(--grid-template-row);

--grid-template-row: repeat(4, minmax(0, 1fr));
grid-template-rows: var(--grid-template-row);

--grid-template-row: repeat(5, minmax(0, 1fr));
grid-template-rows: var(--grid-template-row);

--grid-template-row: repeat(6, minmax(0, 1fr));
grid-template-rows: var(--grid-template-row);

Supported Pseudo-Variants

See more pseudo-variants.

<div class="grid u-gap-2 grid-rows-1">
    <div class="grid-r-1"><p>1</p></div>
</div>
<div class="grid u-gap-2 grid-rows-2">
    <div class="grid-r-2"><p>2</p></div>
    <div class="grid-r-1"><p>1</p></div>
</div>
<div class="grid u-gap-2 grid-rows-3">
    <div class="grid-r-3"><p>3</p></div>
    <div class="grid-r-2"><p>2</p></div>
    <div class="grid-r-1"><p>1</p></div>
</div>
<div class="grid u-gap-2 grid-rows-4">
    <div class="grid-r-4"><p>4</p></div>
    <div class="grid-r-3"><p>3</p></div>
    <div class="grid-r-2"><p>2</p></div>
    <div class="grid-r-1"><p>1</p></div>
</div>

#Responsive

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, if I only want grid to be applied to some contaner for lg and above, then I would use the lg:grid class.

<div class="lg:grid">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

By default, grid is preset with 12 individual columns horizontally with a variable amount of rows. This value can be changed in the framework as well by modifying the grid count inside _config.scss.

$config: (
    extend: (
        grid: (
            properties: (
                grid-columns: 64, // Default is 12
            )
        )
    )
) !default;

The following classes will also be generated to reflect the changes with $grid-columns. For example, if the value was changed to 64, Cirrus will generate up to grid-c-64, grid-r-64, etc. for these classes:

• grid-cols
• grid-c
• grid-r
• grid-cs
• grid-ce
• grid-rs
• grid-re

The same idea also applies to the grid-rows class. Instead, you will have to update the grid-rows property in the configuration.