Grid

Container that uses simple CSS Grid layouts.

Basic Usage

The Grid component is a CSS Grid container. It arranges its children into rows and columns. This class provides a simplified way of creating grid layouts. For more complex layouts, use CSS Grid directly.

To create a Grid, use the class cd-grid on a container element, along with one of the column classes documented below.

<div class="cd-grid cd-columns-s cd-spacing-densest">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

Placement

To determine how items with different heights/widths are aligned with each other within the Grid, use one of the following classes on the Grid container:

cd-placement-top (default)
cd-placement-center
cd-placement-stretched

Top

Center

Stretched

<p class="cd-heading cd-level-3">Top</p>
<div
  class="cd-grid cd-placement-top cd-columns-3 cd-spacing-densest"
>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

<p class="cd-heading cd-level-3">Center</p>
<div
  class="cd-grid cd-placement-center cd-columns-3 cd-spacing-densest"
>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

<p class="cd-heading cd-level-3">Stretched</p>
<div
  class="cd-grid cd-placement-stretched cd-columns-3 cd-spacing-densest"
>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

Spacing

To determine how far apart elements are placed, add one of the following classes:

cd-spacing-none (default)
cd-spacing-densest
cd-spacing-denser
cd-spacing-dense
cd-spacing-sparse
cd-spacing-sparser
cd-spacing-sparsest

TBD

TBD

Columns

To determine how many columns are in a Grid, you can use number-based or size-based column classes.

To create a fixed number of evenly sized columns, add the class cd-columns-<number> to the Grid, where <number> is an integer between 1 and 12, inclusive.

To create a variable number of columns of a fixed size, add the class cd-columns-<size> to the Grid, where <size> is a T-shirt size between 2xs and 2xl. Below is a complete list of size-based classes:

cd-columns-2xs
cd-columns-xs
cd-columns-s
cd-columns-m
cd-columns-l
cd-columns-xl
cd-columns-2xl

TBD

TBD

Outer Spacing

You can control whether the grid has empty space along the outside (padding) in addition to the space between items (gap).

The following classes can be used to set the outer spacing:

cd-outer-spacing-none (default): no padding
cd-outer-spacing-full: spacing on the outside (padding) is equal to spacing on the inside (gap)
cd-outer-spacing-half: spacing on the outside (padding) is half of the spacing on the inside (gap)

TBD

TBD