Grid

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.

CSS grid layouts have limitless possibilities, and Natura11y only covers the essentials. You can and should write custom CSS grid layouts alongside Natura11y's styles.

Let's look at the .grid component beginning with Figure 1.

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 2, the .grid--column-3 class creates a three-column grid.

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

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 4, line 3.

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 5, line 1).

Grid Divider Modifier

You can add horizontal and vertical borders between grid cells by applying the .grid--divider modifier class to .grid selectors.

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 7, the horizontal lines run through.

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

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 9:

Gap Utilities

Apply Natura11y's gap utilities to .grid selectors to add space between grid items.

Order Utilities

Change the layout order of grid items.

Breakpoint Modifiers

Order utilities accept breakpoint modifiers.

Sidebar Layouts

The sidebar layout components provide fixed-width sidebar columns. Columns stack vertically on mobile and shift into a side-by-side layout at the responsive breakpoint. The sidebar width is controlled by the --grid-sidebar-width CSS custom property (default: 300px).

Left Sidebar

Use .grid-sidebar--left to place a fixed-width sidebar on the left with the main content occupying the remaining space.

Right Sidebar

Use .grid-sidebar--right to place the sidebar on the right side instead.

Sidebars on both sides

For a three-column layout with sidebars on both sides, use .grid-sidebars. The layout switches to three columns at the extra-large (xl) breakpoint.

Sidebar layouts are compatible with grid divider modifiers for column borders and gap utilities for spacing between areas.

Related CSS Variables

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