Grid • Natura11y
Jump to main contentJump to website footer
Pineapple fruit lot

Photo by Phoenix Han

Grid

Introduction

Create functional and responsive layouts easily using Natura11y's CSS Grid component.

CSS Grid

Natura11y's CSS Grid component offers essential layout options through 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, use the .grid--column-{x} modifier, where x represents the number of columns (from 1 to 12).

For example, in Figure 7, the .grid--column-3 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 multiple columns within their parent .grid--column-{x} selector. Use the .grid__colspan-{x} modifier to specify the number of columns the item should span (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

Rows in the grid component are automatically created. Grid items can span up to 6 rows by using the .grid__rowspan-{x} modifier, where x represents the number of rows (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 utilities in .grid support breakpoint modifiers.

For responsive layouts, add a breakpoint modifier (e.g., .grid--column-{x}--{y}) where x is the column count and y is the desired breakpoint.

For instance, to create a three-column layout at the medium breakpoint, use .grid--column-3--md (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 add horizontal and vertical borders between grid cells by applying the .grid--divider modifier class to .grid selectors.

  • 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 pseudo-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 Natura11y's gap utilites to .grid selectors to add space between grid items.

The .grid selector with .gap-2 applied:

01

02

03

04

05

06

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 utilities accept breakpoint modifiers.

01

02

03


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