Modern Layouts: CSS Grid vs Flexbox Utilities
Layout is the hardest part of CSS. See how different frameworks handle the 12-column grid vs modern CSS Grid.
For years, the 12-column float-based (and later flexbox-based) grid was the standard for web layout. Bootstrap popularized this with .row and .col-md-4.
However, with the rise of CSS Grid, we now have two powerful ways to layout content: 2D layouts (Grid) and 1D layouts (Flexbox). Let's see how frameworks implement these.
The Classic 12-Column Grid (Bootstrap)
Bootstrap uses Flexbox to simulate a grid. You define a row, and columns must add up to 12. It works, but can require nesting for complex layouts.
Bootstrap 12-Col System
<div class="container-fluid text-center">
<div class="row g-2 mb-2">
<div class="col-4"><div class="p-3 border bg-light">.col-4</div></div>
<div class="col-4"><div class="p-3 border bg-light">.col-4</div></div>
<div class="col-4"><div class="p-3 border bg-light">.col-4</div></div>
</div>
<div class="row g-2">
<div class="col-8"><div class="p-3 border bg-light">.col-8</div></div>
<div class="col-4"><div class="p-3 border bg-light">.col-4</div></div>
</div>
</div>The Modern CSS Grid (Tailwind)
Tailwind exposes native CSS Grid properties. This allows for cleaner HTML (no need for row wrappers in some cases) and gap control without negative margin hacks.
Tailwind Grid Utilities
Notice the use of col-span-2 and row-span-2. Doing row-spanning in Bootstrap requires complex nesting.
<div class="grid grid-cols-3 gap-4 text-center text-white font-bold"> <div class="bg-indigo-500 p-4 rounded shadow">01</div> <div class="bg-indigo-500 p-4 rounded shadow">02</div> <div class="bg-indigo-500 p-4 rounded shadow">03</div> <div class="bg-purple-500 p-4 rounded shadow col-span-2">04 (col-span-2)</div> <div class="bg-indigo-500 p-4 rounded shadow">05</div> <div class="bg-pink-500 p-4 rounded shadow row-span-2 flex items-center justify-center">06 (row-span)</div> <div class="bg-indigo-500 p-4 rounded shadow col-span-2">07</div> </div>
The Metro/Mosaic Layout
Bulma also uses a Flexbox based grid system but has a unique "Tile" system for building Metro-style nested layouts easily.
Bulma Tile System
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child notification is-primary">
<p class="title">Vertical...</p>
<p class="subtitle">Top tile</p>
</article>
<article class="tile is-child notification is-warning">
<p class="title">...tiles</p>
<p class="subtitle">Bottom tile</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-info">
<p class="title">Middle tile</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-success">
<p class="title">Tall tile</p>
<p class="subtitle">With even more content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
</div>
</div>