Enabling Grid Layout with grid
To start using CSS Grid in Tailwind, apply the grid class to a container. This activates grid layout and allows you to control rows and columns easily.
Example:
<div class=“grid”>
<div class=“bg-blue-300 p-4”>Item 1</div>
<div class=“bg-green-300 p-4”>Item 2</div>
</div>
Defining Columns (grid-cols-*)
You can define how many columns your layout should have using grid-cols-*. Tailwind provides utilities from 1 to 12 columns by default.
Example:
<div class=”grid grid-cols-3 gap-4″>
<div class=”bg-red-300 p-4″>1</div>
<div class=”bg-yellow-300 p-4″>2</div>
<div class=”bg-purple-300 p-4″>3</div>
</div>
Controlling Rows (grid-rows-*)
Similar to columns, you can define rows using grid-rows-*. This is useful when you want structured vertical layouts.
Example:
<div class=“grid grid-rows-2 gap-4”>
<div class=“bg-pink-300 p-4”>Row 1</div>
<div class=“bg-indigo-300 p-4”>Row 2</div>
</div>
Spanning Columns & Rows (col-span, row-span)
Grid items can span across multiple columns or rows. This helps create complex layouts like dashboards or featured sections.
Example:
<div class=“col-span-2 bg-gray-300 p-4”>Wide Item</div>
<div class=“bg-gray-500 p-4”>Normal</div>
</div>
Gap & Responsive Grid (gap-*, md:grid-cols-*)
Use gap-* to add spacing between grid items. Tailwind also makes it easy to create responsive layouts using breakpoints like sm, md, lg.
Example:
<div class=”grid grid-cols-1 md:grid-cols-3 gap-6″>
<div class=”bg-teal-300 p-4″>Item 1</div>
<div class=”bg-teal-400 p-4″>Item 2</div>
<div class=”bg-teal-500 p-4″>Item 3</div>
</div>
