Grid Container and Template Columns/Rows

1. Creating a Grid Container

To start using grid, apply the grid class to your container:

<div class="grid">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>
            

2. Defining Columns

Use grid-cols-{n} to set the number of equal-width columns. For example, grid-cols-3 creates 3 columns:

<div class="grid grid-cols-3 gap-4">
    <div class="bg-gray-200 p-4">1</div>
    <div class="bg-gray-200 p-4">2</div>
    <div class="bg-gray-200 p-4">3</div>
</div>
            

3. Defining Rows

Use grid-rows-{n} to create a specific number of rows:

<div class="grid grid-rows-2 grid-flow-col gap-4">
    <div class="bg-blue-100 p-4">A</div>
    <div class="bg-blue-100 p-4">B</div>
    <div class="bg-blue-100 p-4">C</div>
    <div class="bg-blue-100 p-4">D</div>
</div>
            

Use grid-flow-col or grid-flow-row to control how items fill the grid.

4. Auto-Columns and Auto-Rows

Use auto-cols- and auto-rows- to define default sizes:

<div class="grid grid-cols-3 auto-rows-fr gap-2">
    <div class="bg-green-100 p-4">Item 1</div>
    <div class="bg-green-100 p-4">Item 2</div>
    <div class="bg-green-100 p-4">Item 3</div>
</div>