Grid • Natura11y Design Ecosystem

Create responsive layouts with Natura11y’s CSS Grid utilities.

CSS Grid

Natura11y’s CSS Grid utilities provide essential layout options.

Item

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 selector beginning with Figure 1.

1
      <div class="grid">
2

3
          <div>
4
              <p>01</p>
5
          </div>
6

7
          <div>
8
              <p>02</p>
9
          </div>
10

11
          <div>
12
              <p>03</p>
13
          </div>
14

15
      </div>

Figure 1

Figure 1 notes
Lines	Details
1	The parent `.grid` selector is required. It applies CSS Grid layout.
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 2, the .grid--column-3 class creates a three-column grid.

1
      <div class="grid grid--column-3">
2
          ...
3
      </div>

Figure 2

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

1
      <div class="grid grid--column-4">
2

3
          <div class="grid__colspan-3">
4
              <p>01</p>
5
          </div>
6

7
          ...
8

9
      </div>

Figure 3

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.

1
      <div class="grid grid--column-2">
2

3
          <div class="grid__rowspan-2">
4
              <p>01</p>
5
          </div>
6

7
          ...
8

9
      </div>

Figure 4

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

1
      <div class="grid grid--column-3--md">
2
          ...
3
      </div>

Figure 5

Grid Divider Modifier

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

1
      <div class="grid grid--divider grid--column-3">
2
          ...
3
      </div>

Figure 6

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.

1
      <div class="grid grid--divider--fill-x grid--column-3">
2
          ...
3
      </div>

Figure 7

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

1
      <div class="grid grid--divider--fill-y grid--column-3">
2
          ...
3
      </div>

Figure 8

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:

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

Gap Utilities

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

The .grid selector with .gap-2 applied:

Order Utilities

Change the layout order of grid items.

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

      <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 10

Breakpoint Modifiers

Order utilities accept breakpoint modifiers.

      <!-- With breakpoint modifier -->

      <div class="order-3--lg">...</div>

Figure 11

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

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

1
      <div class="grid-sidebar--left">
2

3
          <div class="grid-sidebar__minor">
4
              ...
5
          </div>
6

7
          <div class="grid-sidebar__major">
8
              ...
9
          </div>
10

11
      </div>

Figure 12

Figure 12 notes
Lines	Details
1	`.grid-sidebar--left` positions the sidebar on the left at the `lg` breakpoint. On smaller viewports, the sidebar stacks above the main content.
3	`.grid-sidebar__minor` assigns this element to the sidebar column.
7	`.grid-sidebar__major` assigns this element to the main content column.

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

1
      <div class="grid-sidebar--right">
2

3
          <div class="grid-sidebar__minor">
4
              ...
5
          </div>
6

7
          <div class="grid-sidebar__major">
8
              ...
9
          </div>
10

11
      </div>

Figure 13

Figure 13 notes
Lines	Details
1	`.grid-sidebar--right` positions the sidebar on the right at the `lg` breakpoint. On smaller viewports, the sidebar stacks above the main content.
3	`.grid-sidebar__minor` assigns this element to the sidebar column.
7	`.grid-sidebar__major` assigns this element to the main content column.

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

Content

Sidebar

1
      <div class="grid-sidebars">
2

3
          <div class="grid-sidebar__minor-start">
4
              ...
5
          </div>
6

7
          <div class="grid-sidebar__major">
8
              ...
9
          </div>
10

11
          <div class="grid-sidebar__minor-end">
12
              ...
13
          </div>
14

15
      </div>

Figure 14

Figure 14 notes
Lines	Details
1	`.grid-sidebars` creates a three-column layout at the `xl` breakpoint. On smaller viewports, all three areas stack vertically.
3	`.grid-sidebar__minor-start` assigns this element to the left sidebar column.
7	`.grid-sidebar__major` assigns this element to the main content column.
11	`.grid-sidebar__minor-end` assigns this element to the right sidebar column.

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

Grid styles can be customized by redefining the related CSS custom properties.

:root {
  --grid-divider-gap: var(--spacer-3);
  --grid-divider-border-width: var(--border-width);
  --grid-divider-border-x-color: var(--canvas-border);
  --grid-divider-border-y-color: var(--canvas-border);
  --grid-sidebar-width: 300px;
}

Figure 15

Custom property	Default	Purpose
`--grid-divider-gap`	`var(--spacer-3)`	Gap between grid cells when using grid divider modifiers.
`--grid-divider-border-width`	`var(--border-width)`	Border width used by grid divider pseudo-elements.
`--grid-divider-border-x-color`	`var(--canvas-border)`	Color of horizontal grid divider lines.
`--grid-divider-border-y-color`	`var(--canvas-border)`	Color of vertical grid divider lines.
`--grid-sidebar-width`	`300px`	Fixed width of sidebar columns in grid sidebar layouts.