#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">
    <div class="grid-c-12" style="background: linear-gradient(to right, #8e2de2, #4a00e0); color: #fff; border-radius: .25rem;">
        <p><b>Header</b></p>
    </div>
    <div class="grid-c-4 grid-r-6" style="background: linear-gradient(to right, #8e2de2, #4a00e0); color: #fff; border-radius: .25rem;">
        <p><b>Sidebar</b></p>
    </div>
    <div class="grid-c-8 grid-r-3" style="background: linear-gradient(to right, #8e2de2, #4a00e0); color: #fff; border-radius: .25rem;">
        <p><b>Main Content</b></p>
    </div>
    <div class="grid-c-4 grid-r-3" style="background: linear-gradient(to right, #8e2de2, #4a00e0); color: #fff; border-radius: .25rem;">
        <p><b>Sub Content</b></p>
    </div>
    <div class="grid-c-4 grid-r-3" style="background: linear-gradient(to right, #8e2de2, #4a00e0); color: #fff; border-radius: .25rem;">
        <p><b>Sub Content</b></p>
    </div>
    <div class="grid-c-12" style="background: linear-gradient(to right, #8e2de2, #4a00e0); color: #fff; border-radius: .25rem;">
        <p><b>Footer</b></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 is 12 rows by 12 columns. To change this, you can use any of the grid-cols-* classes where the '*' represents any number from 1 through 12 inclusive.

I think you get the idea.

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>

#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