Css Grid Columns Rows Gap in TailwindCSS
? CSS Grid Utilities in Tailwind CSS: Columns, Rows, and Gap
Tailwind CSS offers utilities to easily work with CSS Grid, controlling columns, rows, and gaps between grid items.
1. Grid Columns
Control the number of columns or the column size.
| Tailwind Class | CSS Equivalent | Description |
|---|---|---|
grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); | 1 column |
grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); | 2 columns |
grid-cols-3 ... up to grid-cols-12 | Similar for 3 to 12 columns | Responsive columns |
grid-cols-none | grid-template-columns: none; | Remove columns |
You can also set fractional column widths or custom sizes via config or inline styles.
2. Grid Rows
Control the number of rows similarly:
| Tailwind Class | CSS Equivalent | Description |
|---|---|---|
grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)); | 1 row |
grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); | 2 rows |
grid-rows-3 ... up to grid-rows-6 | Similar for 3 to 6 rows | Define grid rows |
grid-rows-none | grid-template-rows: none; | Remove rows |
3. Grid Gap
Controls spacing between grid items.
| Tailwind Class | CSS Equivalent | Description |
|---|---|---|
gap-0 | gap: 0; | No gap |
gap-1 to gap-10 | gap: 0.25rem to 2.5rem | Spacing between items |
gap-x-4 | column-gap: 1rem; | Horizontal gap only |
gap-y-2 | row-gap: 0.5rem; | Vertical gap only |
Example: Basic Grid Layout
<div class="grid grid-cols-3 gap-4 p-4 bg-gray-100"> <div class="bg-blue-400 p-4">Item 1</div> <div class="bg-blue-600 p-4">Item 2</div> <div class="bg-blue-800 p-4">Item 3</div> <div class="bg-blue-900 p-4">Item 4</div></div>Example: Grid with Rows and Gaps
<div class="grid grid-rows-3 gap-y-6 gap-x-2 p-4 bg-green-100"> <div class="bg-green-400 p-4">Row 1</div> <div class="bg-green-600 p-4">Row 2</div> <div class="bg-green-800 p-4">Row 3</div></div>Responsive Grid Example
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-red-400 p-4">Responsive 1</div> <div class="bg-red-600 p-4">Responsive 2</div> <div class="bg-red-800 p-4">Responsive 3</div></div>Would you like me to explain grid item placement (like col-span, row-span) next?
