Why Use CSS Grid?

Why Use CSS Grid?

For years, web developers used floats, inline-block, tables, and flexbox to build page layouts. Each had limitations. CSS Grid is the first CSS module designed specifically for two-dimensional layouts — controlling both columns and rows at the same time.

The Evolution of CSS Layouts

Method	Era	Limitations
Tables	Late 1990s	Semantic nightmare, rigid structure
Floats	2000s	Clearfix hacks, fragile layouts
Inline-block	2000s	Whitespace bugs, no equal heights
Flexbox	2010s	One-dimensional only (row OR column)
CSS Grid	2017+	Two-dimensional — rows AND columns together

Grid vs Flexbox

Feature	Flexbox	CSS Grid
Direction	One-dimensional (row or column)	Two-dimensional (rows and columns)
Best for	Navbars, card rows, centering	Full page layouts, complex grids
Content vs Layout	Content-driven (items size the container)	Layout-driven (container sizes the items)
Overlap	Not possible	Items can overlap with grid placement

Flexbox and Grid are not competitors — they are complementary. Use Grid for the overall page layout and Flexbox for components within grid cells.

Your First Grid

<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.item {
    background: #42b883;
    padding: 20px;
    text-align: center;
    color: white;
}

Just two lines — display: grid and grid-template-columns — create a responsive three-column layout. No floats, no clearfix, no hacks.

Key Takeaways

• CSS Grid is purpose-built for two-dimensional layouts
• It controls rows and columns simultaneously — something flexbox cannot do
• Use Grid for page structure; Flexbox for component-level alignment
• display: grid on the container activates grid layout