Corepanel – Grid

Grid Template Columns

Use the grid-cols-{n} utilities to create grids with n equally sized columns.

01

02

03

04

05

06

07

08

09

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">01</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">02</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">03</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">04</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">05</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">06</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">07</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">08</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">09</div>
</div>

Grid Column Start / End

Use the col-span-{n} utilities to make an element span n columns.

01

02

03

04

05

06

07

<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">01</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">02</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">03</div>
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary sm:col-span-2">04</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">05</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">06</div>
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary sm:col-span-2">07</div>
</div>

Grid Column Start / End Line

Use the col-start-{n} and col-end-{n} utilities to make an element start or end at the nth grid line. These can be combined with col-span-{n} to span a specific number of columns.

Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7.

01

02

03

04

<div class="grid grid-cols-1 gap-4 sm:grid-cols-6">
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary sm:col-start-2 sm:col-span-4">01</div>
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary sm:col-start-1 sm:col-end-3">02</div>
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary sm:col-end-7 sm:col-span-2">03</div>
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary sm:col-start-1 sm:col-end-7">04</div>
</div>

Grid Template Rows

Use the grid-rows-{n} utilities to create grids with n equally sized rows.

01

02

03

04

05

06

<div class="grid gap-4 sm:grid-flow-col sm:grid-rows-3">
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">01</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">02</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">03</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">04</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">05</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">06</div>
</div>

Grid Row Start / End Line

Use the row-start-{n} and row-end-{n} utilities to make an element start or end at the nth grid row line.

01

02

03

<div class="grid gap-4 sm:grid-flow-col sm:grid-rows-3">
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary sm:row-start-2 sm:row-span-2">01</div>
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary sm:row-end-3 sm:row-span-2">02</div>
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary sm:row-start-1 sm:row-end-4">03</div>
</div>

Grid Row Start / End

Use the row-span-{n} utilities to make an element span n rows.

01

02

03

<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary row-span-3">01</div>
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary col-span-2">02</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary col-span-2 row-span-2">03</div>
</div>

Grid Auto Flow

Use the grid-flow-{keyword} utilities to control how the auto-placement algorithm works. grid-flow-row-dense backfills gaps left by spanning items.

01

02

03

04

05

<div class="grid grid-flow-row-dense grid-cols-3 gap-4">
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary col-span-2">01</div>
  <div class="flex items-center justify-center rounded-lg bg-primary py-4 text-sm font-medium text-on-primary col-span-2">02</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">03</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">04</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">05</div>
</div>

Grid Auto Columns

Use the auto-cols-{size} utilities to control the size of implicitly-created grid columns.

01

02

03

<div class="grid grid-flow-col auto-cols-max gap-4">
  <div class="flex size-16 items-center justify-center rounded-lg bg-primary-soft text-sm font-medium text-primary">01</div>
  <div class="flex size-16 items-center justify-center rounded-lg bg-primary-soft text-sm font-medium text-primary">02</div>
  <div class="flex size-16 items-center justify-center rounded-lg bg-primary-soft text-sm font-medium text-primary">03</div>
  <div class="flex size-16 items-center justify-center rounded-lg bg-primary-soft text-sm font-medium text-primary">04</div>
</div>

Grid Auto Rows

Use the auto-rows-{size} utilities to control the size of implicitly-created grid rows.

01

02

03

04

05

06

<div class="grid auto-rows-min grid-cols-3 gap-4">
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">01</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">02</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">03</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">04</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">05</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">06</div>
</div>

Hover, focus, and other states

Prefix any utility with a state variant such as hover: or focus-visible: to apply it conditionally. Hover or tab to the cells below.

<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
  <button
    type="button"
    class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary transition-colors hover:bg-primary hover:text-on-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
  >
    01
  </button>
  <button
    type="button"
    class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary transition-colors hover:bg-primary hover:text-on-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
  >
    02
  </button>
  <button
    type="button"
    class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary transition-colors hover:bg-primary hover:text-on-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
  >
    03
  </button>
</div>

Breakpoints and media queries

Prefix a utility with a breakpoint such as md: or xl: to apply it from that screen size up. Resize the window to see the column count change.

01

02

03

04

05

06

<div class="grid grid-cols-2 gap-4 md:grid-cols-4 xl:grid-cols-6">
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">01</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">02</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">03</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">04</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">05</div>
  <div class="flex items-center justify-center rounded-lg bg-primary-soft py-4 text-sm font-medium text-primary">06</div>
</div>