Grid
Master two-dimensional layouts. Define precise rows and columns to create complex structures instantly using Tailwind CSS Grid utilities.
Grid Tracks
Alignment
Spacing & Items
Grid Container
1
2
3
4
5
6
class="grid grid-cols-3 grid-rows-2 gap-4"iCSS Grid Master Rules
Grid is a two-dimensional layout system. It allows you to control both rows and columns simultaneously, making it perfect for complex page layouts and structured galleries.
✨ Grid Tracks: You define the structure using columns and rows. By default, Tailwind uses fraction units (`fr`), meaning `grid-cols-3` creates 3 equal-width columns.
Items will automatically flow into the next available cell. If you have more items than columns, Grid implicitly creates new rows!
Items will automatically flow into the next available cell. If you have more items than columns, Grid implicitly creates new rows!
⚠️ Stretch vs Alignment: By default, Grid items `stretch` to fill the entire height and width of their cell.
If you change `justify-items` or `align-items` to `center`, `start`, or `end`, the items will shrink to fit their content and float within their designated cell!
If you change `justify-items` or `align-items` to `center`, `start`, or `end`, the items will shrink to fit their content and float within their designated cell!