Grid

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).

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.

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.

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).

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.

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).

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:

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.

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

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:

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);

Order Utilities

Change the layout order of grid items.

Breakpoint Modifiers

Order utilites accept breakpoint modifiers.

Related CSS Variables

Further customize Grid by redefining any of their related CSS variables as shown below.