#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-cols-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.

#Template Sizes

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.

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>

#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 grid-lg class.

<div class="grid-lg">
    <!-- ... -->
</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.