Grid

Use the Grid component to display related/equivalent items such as Cards in a responsive grid-like formation.

Grid progressively enhances a single column layout (with basic Stack-like spacing) into a configurable CSS Grid layout.

Light theme

Card 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quae eos laboriosam vero aliquid quam soluta ad officiis quia omnis molestiae optio dolore nesciunt tempora? Dolor doloremque illum quasi exercitationem?
Card 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo qui delectus eos sapiente. Necessitatibus quis ratione praesentium esse culpa accusantium est, tempore qui deleniti molestias fugit doloremque debitis tempora illum.
Card 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse laboriosam recusandae illo non accusamus vero cupiditate aspernatur incidunt nostrum, commodi quos dicta ducimus quidem debitis et reiciendis dolores minima velit.
Card 4

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae eum, id perspiciatis explicabo soluta enim debitis dicta? Quia molestiae at odio perspiciatis veniam illo nisi quis, necessitatibus, nam et accusamus!
Card 5

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium temporibus commodi, voluptatum nisi accusantium voluptate quaerat. Sapiente, placeat cumque. Quod dolor deserunt dolorem reprehenderit cumque quos quas molestiae voluptate nemo.
Card 6

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat earum, doloremque sit commodi tempora magnam provident enim explicabo quis ducimus distinctio eaque veritatis veniam culpa fuga, molestiae natus odit porro!

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

Card 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quae eos laboriosam vero aliquid quam soluta ad officiis quia omnis molestiae optio dolore nesciunt tempora? Dolor doloremque illum quasi exercitationem?
Card 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo qui delectus eos sapiente. Necessitatibus quis ratione praesentium esse culpa accusantium est, tempore qui deleniti molestias fugit doloremque debitis tempora illum.
Card 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse laboriosam recusandae illo non accusamus vero cupiditate aspernatur incidunt nostrum, commodi quos dicta ducimus quidem debitis et reiciendis dolores minima velit.
Card 4

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae eum, id perspiciatis explicabo soluta enim debitis dicta? Quia molestiae at odio perspiciatis veniam illo nisi quis, necessitatibus, nam et accusamus!
Card 5

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium temporibus commodi, voluptatum nisi accusantium voluptate quaerat. Sapiente, placeat cumque. Quod dolor deserunt dolorem reprehenderit cumque quos quas molestiae voluptate nemo.
Card 6

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat earum, doloremque sit commodi tempora magnam provident enim explicabo quis ducimus distinctio eaque veritatis veniam culpa fuga, molestiae natus odit porro!

⚠️ List semantics

As in the preceding example, the grid is a list. It is important that itemized/grouped elements communicate themselves as lists to screen reader software, and using a <ul> is how we do that.

<div class="ds-grid">
  <ul>
    <li><!-- grid item 1 --></li>
    <li><!-- grid item 2 --></li>
    <li><!-- grid item 3 --></li>
    <li><!-- etc --></li>
  </ul>
</div>

Configuration

Wherever CSS Grid is supported, so are custom properties. Hence, you can configure your Grid by adjusting the --gridCellMin and --gridGap values within a style attribute.

Property	Purpose	Default value
`--gridCellMin`	The minimum width of a grid cell. This is entered into the `min()` function so that the smaller of this value versus `100%` is applied. This prevents overflow on small screens.	30ch (30 characters)
`--gridGap`	The gap between Grid cells (property: `grid-gap`)	1.25rem

Example

In the following example --gridCellMin is set to 30ch and --gridGap to 3rem.

<div class="ds-grid" style="--gridCellMin: 40ch; --gridGap: 3rem;">
  <!-- grid cells/items here -->
</div>