Grid • Natura11y
Pineapple fruit lot

Photo by Phoenix Han

Grid

Introduction

Build functional, responsive layout patterns with Natura11y's convenient CSS Grid component.


CSS Grid

Natura11y's CSS grid component provides some fundamental grid layout options (via utility classes).

Item

Item

Item

Item

Item

Item

Item

Attempting to reproduce the limitless layout options available with CSS Grid Layout would be altogether misguided. You can and should create grid layouts yourself—writing custom CSS—alongside Natura11y's styles.

With that out of the way, let's look at the .grid component beginning with Figure 6.

01

02

03


        <div class="grid">
        
            <div>
                <p>01</p>
            </div>
            
            <div>
                <p>02</p>
            </div>
            
            <div>
                <p>03</p>
            </div>
            
        </div>
    
Figure 6
Line #Details
1

The parent .grid selector is required.

It applies the css grid specification.

3-13

All direct children of the .grid selector are automatically grid items.

Grid Columns

To create columns within a .grid selector, apply the .grid--column-{x} modifier. Here x equals the actual column count (from 1 to 12).

As shown is Figure 7 below, the .grid--column-3 modifier class creates a three column grid.

01

02

03

04

05

06


        <div class="grid grid--column-3">
            ...
        </div>
    
Figure 7

Column Span

Grid items can span the number of columns defined by their parent .grid--column-{x} modifier. Include the .grid__colspan-{x} modifier on a grid item. Here x equals the column count the grid item will take up (from 2 to 12).

01

02

03

04

05

06


        <div class="grid grid--column-4">
        
            <div class="grid__colspan-3">
                <p>01</p>
            </div>
            
            ...
            
        </div>
    
Figure 8

Grid Rows

With the grid component, rows are implicit. Grid items can span up to 6 rows. Apply the .grid__rowspan-{x} modifier on a grid item. Here x equals the row count the grid item will take up (from 2 to 6). See Figure 9, line 3.

01

02

03


        <div class="grid grid--column-2">
        
            <div class="grid__rowspan-2">
                <p>01</p>
            </div>
            
            ...
            
        </div>
    
Figure 9

Breakpoint Modifiers

All column and row utilites in .grid accept breakpoint modifiers.

For responsive layouts, chain a breakpoint modifier (e.g. .grid--column-{x}--{y} where x equals the column count, and y specifies the desired breakpoint.

For example, to make a three-column layout at the medium breakpoint, apply .grid--column-3--md to the .grid selector (Figure 10, line 1).

01

02

03

04

05

06


        <div class="grid grid--column-3--md">
            ...
        </div>
    
Figure 10

Grid Divider Modifier

You can now add horizontal and vertical borders between grid cells! Apply the .grid--divider modifier class to .grid selectors. Doing so results in the following:

  • 01

  • 02

  • 03

  • 04

  • 05

  • 06

  • 07

  • 08

  • 09


        <div class="grid grid--divider grid--column-3">
            ...
        </div>
    
Figure 10

You can specify which axis (x or y) has continuous lines. Chain --fill-x or --fill-y modifiers to .grid--divider. With .grid--divider--fill-x present on the example in Figure 11, the horizontal lines run through.

  • 01

  • 02

  • 03

  • 04

  • 05

  • 06

  • 07

  • 08

  • 09


        <div class="grid grid--divider--fill-x grid--column-3">
            ...
        </div>
    
Figure 11

With .grid--divider--fill-y present on the example in Figure 12, the vertical lines run through.

  • 01

  • 02

  • 03

  • 04

  • 05

  • 06

  • 07

  • 08

  • 09


        <div class="grid grid--divider--fill-y grid--column-3">
            ...
        </div>
    
Figure 12

The .grid--divider modifier class adds borders using psuedo elements on each of its direct children or cells. For this reason, when its child has overflow: hidden; css property applied, such as with backdrops, for example, that child's border would not appear.

To remedy this, simply nest each child of .grid--divider in a containing element. You could use a <ul> tag with <li> children, as shown in Figure 13:


        <ul class="grid grid--divider--fill-x grid--column-3">
        
            <li>
                <div class="backdrop">
                    <!-- ... -->
                </div>
            </li>
            
            <li>
                <div class="backdrop">
                <!-- ... -->
                </div>
            </li>
            
            <li>
                <div class="backdrop">
                <!-- ... -->
                </div>
            </li>
            
        </ul>
    
Figure 13

Gap Utilities

Apply the .gap-{x} utility class to .grid selectors. Here x equals the gap value. The gap value includes the global border width (e.g., .gap-border) and the default spacer values (e.g., .gap-1);

The .grid selector with .gap-2 applied:

01

02

03

04

05

06

        
        <div class="grid gap-2">
            ...
        </div>
        
        <!-- All gap utilities: -->
        
        <div class="grid gap-border">...</div>
        <div class="grid gap-1">...</div>
        <div class="grid gap-2">...</div>
        <div class="grid gap-3">...</div>
        <div class="grid gap-4">...</div>
        <div class="grid gap-5">...</div>
    
Figure 11

Order Utilities

Change the layout order of grid items.

The .grid selector with .order-3 applied to the first item:

01

02

03


        <div class="grid grid--column-3--md theme-light border font-size-md text-align-center">
        
            <div class="padding-2 border order-3">
                <p>01</p>
            </div>
            <div class="padding-2 border">
                <p>02</p>
            </div>
            <div class="padding-2 border">
                <p>03</p>
            </div>
            
        </div>
        
        <!-- All order utilities: -->
        
        <div class="order-1">...</div>
        <div class="order-2">...</div>
        <div class="order-3">...</div>
        <div class="order-4">...</div>
        <div class="order-5">...</div>
        <div class="order-6">...</div>
        <div class="order-7">...</div>
        <div class="order-8">...</div>
        <div class="order-9">...</div>
        <div class="order-10">...</div>
        <div class="order-11">...</div>
        <div class="order-12">...</div>
    
Figure 12

Breakpoint Modifiers

Order utilites accept breakpoint modifiers.

01

02

03


        <!-- With breakpoint modifier -->
        
        <div class="order-3--lg">...</div>
    
Figure 13