Display grid

To enabled grid use any of the display grid classes from here.

Below you can find a wide range of helper classes to help you create and tranform the layout of grid containers:

Grid Template Columns

Use .grid-cols-* to set the columns in a grid layout.

  • .grid-cols-1 or .grid-cols-{xs,sm,md,lg,xl,xxl}-1
  • .grid-cols-2 or .grid-cols-{xs,sm,md,lg,xl,xxl}-2
  • .grid-cols-3 or .grid-cols-{xs,sm,md,lg,xl,xxl}-3
  • .grid-cols-4 or .grid-cols-{xs,sm,md,lg,xl,xxl}-4
  • .grid-cols-5 or .grid-cols-{xs,sm,md,lg,xl,xxl}-5
  • .grid-cols-6 or .grid-cols-{xs,sm,md,lg,xl,xxl}-6
  • .grid-cols-7 or .grid-cols-{xs,sm,md,lg,xl,xxl}-7
  • .grid-cols-8 or .grid-cols-{xs,sm,md,lg,xl,xxl}-8
  • .grid-cols-9 or .grid-cols-{xs,sm,md,lg,xl,xxl}-9
  • .grid-cols-10 or .grid-cols-{xs,sm,md,lg,xl,xxl}-10
  • .grid-cols-11 or .grid-cols-{xs,sm,md,lg,xl,xxl}-11
  • .grid-cols-12 or .grid-cols-{xs,sm,md,lg,xl,xxl}-12
  • .grid-cols-none or .grid-cols-{xs,sm,md,lg,xl,xxl}-none

.grid-cols-3

item 1
item 2
item 3
item 4
item 5
item 6
item 7
					


<div class="d-grid grid-cols-3 gap-16">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
</div>

Grid column start/end

Use the classes below to control how elements are sized and placed across grid columns:

  • .grid-col-auto or .grid-col-{xs,sm,md,lg,xl,xxl}-auto
  • .grid-col-span-1 to .grid-col-span-12 or .grid-col-span-{xs,sm,md,lg,xl,xxl}-*
  • .grid-col-span-full or .grid-col-span-{xs,sm,md,lg,xl,xxl}-full
  • .grid-col-start-1 to .grid-col-start-13 or .grid-col-start-{xs,sm,md,lg,xl,xxl}-*
  • .grid-col-start-auto or .grid-col-start-{xs,sm,md,lg,xl,xxl}-auto
  • .grid-col-end-1 to .grid-col-end-13 or .grid-col-end-{xs,sm,md,lg,xl,xxl}-*
  • .grid-col-end-auto or .grid-col-end-{xs,sm,md,lg,xl,xxl}-auto
col 1
col 2
col 3
col 4
col 5
grid-col-start-2 and grid-col-span-2
grid-col-start-1 and grid-col-end-3
grid-col-start-2 and grid-col-end-5
grid-col-end-6 and grid-col-span-2
					


<div class="d-grid grid-cols-5 gap-16">
  <div>col 1</div>
  <div>col 2</div>
  <div>col 3</div>
  <div>col 4</div>
  <div>col 5</div>
  <div class="grid-col-start-2 grid-col-span-3">grid-col-start-2 and grid-col-span-3</div>
  <div class="grid-col-start-1 grid-col-end-3">grid-col-start-1 and grid-col-end-3</div>
  <div class="grid-col-start-2 grid-col-end-5">grid-col-start-2 and grid-col-end-5</div>
  <div class="grid-col-end-6 grid-col-span-2">grid-col-end-6 and grid-col-span-2</div>
</div>

Grid template rows

Use the classes below to specify the rows in a grid layout:

  • .grid-rows-1 to .grid-rows-6 or .grid-rows-{xs,sm,md,lg,xl,xxl}-*
  • .grid-rows-none or .grid-rows-{xs,sm,md,lg,xl,xxl}-none
item 1
item 2
item 3
item 4
item 5
item 6
item 7
					


<div class="d-grid grid-rows-5 grid-flow-col border gap-16">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
</div>

Grid row start/end

Use the classes below to control how elements are sized and placed across grid rows:

  • .grid-row-auto or .grid-row-{xs,sm,md,lg,xl,xxl}-auto
  • .grid-row-span-1 to .grid-row-span-6 or .grid-row-span-{xs,sm,md,lg,xl,xxl}-*
  • .grid-row-span-full or .grid-row-span-{xs,sm,md,lg,xl,xxl}-full
  • .grid-row-start-1 to .grid-row-start-7 or .grid-row-start-{xs,sm,md,lg,xl,xxl}-*
  • .grid-row-start-auto or .grid-row-start-{xs,sm,md,lg,xl,xxl}-auto
  • .grid-row-end-1 to .grid-row-end-7 or .grid-row-end-{xs,sm,md,lg,xl,xxl}-*
  • .grid-row-end-auto or .grid-row-end-{xs,sm,md,lg,xl,xxl}-auto
row 1
row 2
row 3
row 4
row 5
grid-row-start-2 and grid-row-span-3
grid-row-start-1 and grid-row-end-3
grid-row-start-3 and grid-row-end-6
					


<div class="d-grid grid-row-5 grid-flow-col border gap-16">
  <div>row 1</div>
  <div>row 2</div>
  <div>row 3</div>
  <div>row 4</div>
  <div>row 5</div>
  <div class="grid-row-start-2 grid-row-span-3">grid-row-start-2 and grid-row-span-3</div>
  <div class="grid-row-start-1 grid-row-end-3">grid-row-start-1 and grid-row-end-3</div>
  <div class="grid-row-start-3 grid-row-end-6">grid-row-start-3 and grid-row-end-6</div>
</div>

Grid auto flow

Use the classes below to control how elements in a grid are auto-placed:

  • .grid-flow-row or .grid-flow-{xs,sm,md,lg,xl,xxl}-row
  • .grid-flow-col or .grid-flow-{xs,sm,md,lg,xl,xxl}-col
  • .grid-flow-dense or .grid-flow-{xs,sm,md,lg,xl,xxl}-dense
  • .grid-flow-row-dense or .grid-flow-{xs,sm,md,lg,xl,xxl}-row-dense
  • .grid-flow-col-dense or .grid-flow-{xs,sm,md,lg,xl,xxl}-col-dense
item 1
item 2
item 3
item 4
item 5
item 6
item 7
					


<div class="d-grid grid-cols-3 grid-rows-3 grid-flow-col border gap-16">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
</div>

Grid auto columns

Use the classes below to control the size of implicitly-created grid columns:

  • .grid-auto-cols-auto or .grid-auto-cols-{xs,sm,md,lg,xl,xxl}-auto
  • .grid-auto-cols-min or .grid-auto-cols-{xs,sm,md,lg,xl,xxl}-min
  • .grid-auto-cols-max or .grid-auto-cols-{xs,sm,md,lg,xl,xxl}-max
  • .grid-auto-cols-fr or .grid-auto-cols-{xs,sm,md,lg,xl,xxl}-fr
item 1
item 2 short
item 3 with longer text
item 4
item 5
					


<div class="d-grid grid-flow-col grid-auto-cols-max gap-16">
  <div>item 1</div>
  <div>item 2 short</div>
  <div>item 3 with longer text</div>
  <div>item 4</div>
  <div>item 5</div>
</div>

Grid auto rows

Use the classes below to control the size of implicitly-created grid rows:

  • .grid-auto-rows-auto or .grid-auto-rows-{xs,sm,md,lg,xl,xxl}-auto
  • .grid-auto-rows-min or .grid-auto-rows-{xs,sm,md,lg,xl,xxl}-min
  • .grid-auto-rows-max or .grid-auto-rows-{xs,sm,md,lg,xl,xxl}-max
  • .grid-auto-rows-fr or .grid-auto-rows-{xs,sm,md,lg,xl,xxl}-fr
item 1
item 2 short
item 3
with longer text
item 4
item 5
					


<div class="d-grid grid-flow-row grid-auto-rows-max gap-16">
  <div>item 1</div>
  <div>item 2 short</div>
  <div>item 3 with longer text</div>
  <div>item 4</div>
  <div>item 5</div>
</div>