Defining Grid Columns
Create multi-column layouts with grid-cols-1 through grid-cols-12 and use grid-cols-none for custom configurations.
CSS Grid in Tailwind
CSS Grid is a two-dimensional layout system that lets you place items in rows and columns simultaneously. Tailwind CSS provides utility classes that map directly to CSS Grid properties, so you never have to write display: grid or grid-template-columns by hand. You simply add the right class names to your HTML elements.
<div class="grid">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Activating Grid Display
To turn an element into a grid container, apply the grid class. Without any column definition, all children stack into a single column by default. This is the starting point for any Tailwind Grid layout — every grid utility you add builds on top of the grid class.
<!-- Single-column grid by default -->
<div class="grid gap-4">
<div class="bg-blue-100 p-4">Card 1</div>
<div class="bg-blue-100 p-4">Card 2</div>
<div class="bg-blue-100 p-4">Card 3</div>
</div>All lessons in this course
- Defining Grid Columns
- Column and Row Spanning
- Grid Rows and Auto Placement
- Gap, Justify, and Align in Grid