Tailwind CSS Grid
Grid system from Tailwind CSS, refer to the official doc for more detail usage
Grid Template Columns
Use the grid-cols-{n} utilities to create grids with n equally sized columns.
<div class="grid grid-cols-4 gap-4">
<div>01</div>
<!-- ... -->
<div>09</div>
</div>Grid Column Start / End
Use the col-span-{n} utilities to make an element span n columns.
<div class="grid grid-cols-3 gap-4">
<div class="...">01</div>
<div class="...">02</div>
<div class="...">03</div>
<div class="col-span-2 ...">04</div>
<div class="...">05</div>
<div class="...">06</div>
<div class="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 also be combined with the col-span-{n} utilities to span a specific number of columns.
<div class="grid grid-cols-6 gap-4">
<div class="col-start-2 col-span-4 ...">01</div>
<div class="col-start-1 col-end-3 ...">02</div>
<div class="col-end-7 col-span-2 ...">03</div>
<div class="col-start-1 col-end-7 ...">04</div>
</div>Grid Template Rows
Use the grid-rows-{n} utilities to create grids with n equally sized rows.
<div class="grid grid-rows-4 grid-flow-col gap-4">
<div>01</div>
<!-- ... -->
<div>09</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 line. These can also be combined with the row-span-{n} utilities to span a specific number of rows.
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-start-2 row-span-2 ...">01</div>
<div class="row-end-3 row-span-2 ...">02</div>
<div class="row-start-1 row-end-4 ...">03</div>
</div>Grid Row Start / End
Use the row-span-{n} utilities to make an element span n rows.
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-span-3 ...">01</div>
<div class="col-span-2 ...">02</div>
<div class="row-span-2 col-span-2 ...">03</div>
</div>Grid Auto Flow
Use the grid-flow-{keyword} utilities to control how the auto-placement algorithm works for a grid layout.
<div class="grid grid-flow-row-dense grid-cols-3 grid-rows-3 ...">
<div class="col-span-2">01</div>
<div class="col-span-2">02</div>
<div>03</div>
<div>04</div>
<div>05</div>
</div>Grid Auto Columns
Use the auto-cols-{size} utilities to control the size of implicitly-created grid columns.
<div class="grid grid-flow-col auto-cols-max">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
Grid Auto Rows
Use the auto-rows-{size} utilities to control the size implicitly-created grid rows.
<div class="grid grid-flow-row auto-rows-max gap-4">
<div class="p-4 rounded-lg text-center font-semibold text-white shadow-lg bg-amber-500">01</div>
<div class="p-4 rounded-lg text-center font-semibold text-white shadow-lg bg-amber-500">02</div>
<div class="p-4 rounded-lg text-center font-semibold text-white shadow-lg bg-amber-500">03</div>
</div>