Layout
Grid
CSS Grid is ideal for two-dimensional layouts (rows and columns together). Tailwind makes it declarative with grid, grid-cols-* and gap-*.
Columns and gaps
grid enables grid layout; grid-cols-3 creates three equal columns; gap-4 spaces them. Make it responsive by changing the column count per breakpoint.
Example
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white p-6 rounded-xl shadow text-center">A</div>
<div class="bg-white p-6 rounded-xl shadow text-center">B</div>
<div class="bg-white p-6 rounded-xl shadow text-center">C</div>
<div class="bg-white p-6 rounded-xl shadow text-center">D</div>
</div>Spanning columns
col-span-2 makes an item take up two columns. This is perfect for feature tiles that should be wider than the rest.
Example
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 bg-sky-600 text-white p-6 rounded-xl">Featured (spans 2)</div>
<div class="bg-white p-6 rounded-xl shadow">Side</div>
</div>💡
Flexbox is best for content that flows in one direction; Grid is best when you need aligned rows AND columns.