Browse CSS

Grid

Create clear columns and spans that adapt to small and large screens.

Columns and spans

Class	Behavior
`col-auto`	`grid-column:auto`
`col-span-full`	`grid-column:1 / -1`
`grid-cols-1`	`grid-template-columns:repeat(1,minmax(0,1fr))`
`col-span-1`	`grid-column:span 1 / span 1`
`grid-cols-2`	`grid-template-columns:repeat(2,minmax(0,1fr))`
`col-span-2`	`grid-column:span 2 / span 2`
`grid-cols-3`	`grid-template-columns:repeat(3,minmax(0,1fr))`
`col-span-3`	`grid-column:span 3 / span 3`
`grid-cols-4`	`grid-template-columns:repeat(4,minmax(0,1fr))`
`col-span-4`	`grid-column:span 4 / span 4`
`grid-cols-5`	`grid-template-columns:repeat(5,minmax(0,1fr))`
`col-span-5`	`grid-column:span 5 / span 5`
`grid-cols-6`	`grid-template-columns:repeat(6,minmax(0,1fr))`
`col-span-6`	`grid-column:span 6 / span 6`

Explicit columns

Use zero-minimum tracks so long content can shrink and wrap. Keep one column on mobile and add columns when content has enough room.

Research

Understand what customers need.

Design

Explore and test the experience.

Build

Bring the best ideas to life.

<div class="grid grid-cols-1 md:grid-cols-3 gap-md">
  <article class="panel stack gap-sm">
    <h3 class="m-0">
      Research
    </h3>
    <p class="muted m-0">
      Understand what customers need.
    </p>
  </article>
  <article class="panel stack gap-sm">
    <h3 class="m-0">
      Design
    </h3>
    <p class="muted m-0">
      Explore and test the experience.
    </p>
  </article>
  <article class="panel stack gap-sm">
    <h3 class="m-0">
      Build
    </h3>
    <p class="muted m-0">
      Bring the best ideas to life.
    </p>
  </article>
</div>

A wider primary card

Spans apply only from 48rem, so the mobile layout never creates unintended columns. Use col-span-full for a row that spans every explicit column.

Project activity

Review decisions, shared files, and the team’s next steps.

Next milestone

Prototype review on Friday.

All updates are shared with your team.

<div class="grid grid-cols-1 md:grid-cols-3 gap-md">
  <article class="panel stack gap-sm md:col-span-2">
    <h3 class="m-0">
      Project activity
    </h3>
    <p class="muted m-0">
      Review decisions, shared files, and the team’s next steps.
    </p>
  </article>
  <article class="panel stack gap-sm">
    <h3 class="m-0">
      Next milestone
    </h3>
    <p class="muted m-0">
      Prototype review on Friday.
    </p>
  </article>
  <p class="panel col-span-full max-w-none m-0">
    All updates are shared with your team.
  </p>
</div>

Combine these with grid. Without a column utility, grid still fits as many 240px columns as space allows. Keep a span within the active column count, or reset it with col-auto at the relevant breakpoint. Avoid changing visual order independently of DOM order.