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
- grid column start/end
- grid template rows
- grid auto flow
- grid auto columns
- grid auto rows
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
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>