Grids

Build functional, responsive layout patterns. Choose from Natura11y's convenient flexbox grid or the more contemporary CSS Grid component.

Flexbox Grid

Natura11y offers a 12 column flexbox grid system that may be familiar to you. Continue reading to learn about the Matrix component.

Matrix Component

The example in Figure 1 shows the HTML needed to get started using the Matrix component.

Matrix Cell Width

To specify the width of matrix cells, use the .matrix--cell-{x} modifier class, where x equals their desired width (a number from 1 to 12).

For example, to make a three-column matrix using the 12 column grid system, apply .matrix--cell-4 directly to the .matrix selector (Figure 2, line 1).

The .matrix--cell-{x} modifier class works on individual .matrix__cell selectors, too.

Bulding from the previous example, we can remove the sixth cell and allow the fifth cell to fill the remaining space. On the fifth .matrix__cell instance, notice the .matrix--cell-8 modifier class (Figure 3, line 19).

Fill and Fit

In addition to the 12 width values, .matrix--cell-fill and .matrix-cell-fit modifier classes are available.

Using .matrix--cell-fill divides the remaining space (width) and fills it. While .matrix--cell-fit allows the cell's content to determine it's width (Figure 4).

Breakpoint Modifiers

All matrix cell width utilites in .matrix accept breakpoint modifiers.

For responsive layouts, chain a breakpoint modifier (e.g. .matrix--cell-{x}--{y} where x equals the cell width, and y specifies the desired breakpoint.

For example, to make a three-column layout at the medium breakpoint, apply .matrix--cell-4--md to the .matrix selector (Figure 4, line 1).

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). This works in direct contrast with the .matrix grid system mentioned above.

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

Add space between matrix cells and grid items using the same utility class. Apply the .gap-{x} utility class to .matrix, and .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);

With the example in Figure 9, both .matrix, and .grid have the .gap-{x} applied.

Order Utilities

Change the layout order of matrix cells and grid items.

Breakpoint Modifiers

Order utilites accept breakpoint modifiers.

Related CSS Variables

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