Grid

Overview

Use grid utilities to control CSS Grid layout behavior. These utilities work with Chassis CSS’s CSS Grid layout system to manage column counts and auto-placement algorithms.

Column counts

Use grid-cols-{value} utilities to set the number of columns in a CSS Grid container by modifying the --cx-columns CSS variable. Chassis CSS’s CSS Grid system supports 3, 4, and 6 column layouts out of the box.

<div class="grid text-center grid-cols-3">
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
</div>

<div class="grid text-center grid-cols-4">
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
</div>

<div class="grid text-center grid-cols-6">
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
</div>

These utilities set the --cx-columns CSS variable:

.grid-cols-3 {
  --cx-columns: 3;
}

.grid-cols-4 {
  --cx-columns: 4;
}

.grid-cols-6 {
  --cx-columns: 6;
}

Fill columns

Use grid-cols-fill to make a grid item span the entire width of the grid container by setting grid-column: 1 / -1.

<div class="grid text-center" style="--cx-columns: 4;">
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div class="grid-cols-fill">Full width column</div>
  <div>Column</div>
  <div>Column</div>
</div>

<div class="grid" style="--cx-columns: 4;">
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div class="grid-cols-fill">Full width column</div>
  <div>Column</div>
  <div>Column</div>
</div>

Auto flow

Control how auto-placed items are inserted into the grid with grid-auto-flow utilities.

Row (default)

Use grid-auto-flow-row to place items by filling each row in turn, adding new rows as necessary.

<div class="grid text-center grid-auto-flow-row" style="--cx-columns: 3;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

Column

Use grid-auto-flow-column to place items by filling each column in turn, adding new columns as necessary.

<div class="grid text-center grid-auto-flow-column" style="--cx-rows: 3; --cx-columns: 3;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

Dense

Use grid-auto-flow-dense to use the "dense" packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later.

<div class="grid text-center grid-auto-flow-dense" style="--cx-columns: 3;">
  <div class="g-col-2">Item 1 (spans 2)</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div class="g-col-2">Item 5 (spans 2)</div>
</div>

.grid-auto-flow-row {
  grid-auto-flow: row;
}

.grid-auto-flow-column {
  grid-auto-flow: column;
}

.grid-auto-flow-dense {
  grid-auto-flow: dense;
}

Responsive

All grid utilities are responsive and include all breakpoints.

Column counts

• .grid-cols-3
• .grid-cols-4
• .grid-cols-6
• .grid-cols-fill
• .small:grid-cols-3
• .small:grid-cols-4
• .small:grid-cols-6
• .small:grid-cols-fill
• .medium:grid-cols-3
• .medium:grid-cols-4
• .medium:grid-cols-6
• .medium:grid-cols-fill
• .large:grid-cols-3
• .large:grid-cols-4
• .large:grid-cols-6
• .large:grid-cols-fill
• .xlarge:grid-cols-3
• .xlarge:grid-cols-4
• .xlarge:grid-cols-6
• .xlarge:grid-cols-fill
• .2xlarge:grid-cols-3
• .2xlarge:grid-cols-4
• .2xlarge:grid-cols-6
• .2xlarge:grid-cols-fill

Auto flow

• .grid-auto-flow-row
• .grid-auto-flow-column
• .grid-auto-flow-dense
• .small:grid-auto-flow-row
• .small:grid-auto-flow-column
• .small:grid-auto-flow-dense
• .medium:grid-auto-flow-row
• .medium:grid-auto-flow-column
• .medium:grid-auto-flow-dense
• .large:grid-auto-flow-row
• .large:grid-auto-flow-column
• .large:grid-auto-flow-dense
• .xlarge:grid-auto-flow-row
• .xlarge:grid-auto-flow-column
• .xlarge:grid-auto-flow-dense
• .2xlarge:grid-auto-flow-row
• .2xlarge:grid-auto-flow-column
• .2xlarge:grid-auto-flow-dense

CSS

Grid utilities are generated via the utilities API.

Reference

The table lists all grid utilities and their CSS properties.

Utilities API

Grid utilities are declared in scss/utilities/_grid.scss using the utilities API.

"grid-column-counts": (
  responsive: true,
  // property: --columns,
  property: grid-template-columns,
  class: grid-cols,
  values: (
    "1": 1fr,
    "2": repeat(2, 1fr),
    "3": repeat(3, 1fr),
    "4": repeat(4, 1fr),
    "6": repeat(6, 1fr),
  )
),
"grid-columns": (
  responsive: true,
  property: grid-column,
  class: grid-cols,
  values: (
    fill: #{"1 / -1"},
  )
),
"grid-auto-flow": (
  responsive: true,
  property: grid-auto-flow,
  class: grid-auto-flow,
  values: row column dense
),