Flexbox vs Grid: Layout Techniques, Code Samples, and Responsive Design
This article compares Flexbox and CSS Grid for creating grid‑style, backend admin, and responsive layouts, provides complete HTML/CSS code examples for each approach, discusses compatibility issues, and explains when to choose one technique over the other.
Introduction
Flexbox is widely used for layout, but CSS Grid can simplify certain scenarios. The article demonstrates several common layout cases where Grid offers a cleaner solution.
Grid‑style Layout Example
Goal: a container 1000 px wide with items 300 px wide, three items per row, and the outer items flush with the container edges.
Flexbox implementation
The Flexbox solution uses display: flex , flex-wrap: wrap , justify-content: space-between , and a gap . The full HTML/CSS code is:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
}
.item {
background: pink;
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<div class="box">
<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 class="item">7</div>
<div class="item">8</div>
</div>
</body>
</html>Because justify-content: space-between distributes remaining space, the last row may not align as expected when it contains fewer than three items, requiring extra handling such as adding invisible filler elements or using percentage widths.
Grid implementation
Using Grid, the same layout is achieved with only a few lines of CSS, avoiding the extra Flexbox adjustments:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
display: grid;
grid-template-columns: repeat(3, 300px);
justify-content: space-between;
gap: 10px;
width: 1000px;
}
.item {
background: pink;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
<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 class="item">7</div>
<div class="item">8</div>
</div>
</body>
</html>Backend Admin Layout
A typical admin dashboard requires a header, sidebar, main content area, and footer. With Flexbox this needs many nested containers, while Grid can define the entire two‑dimensional layout in a single container.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 100px 1fr 100px;
grid-template-areas:
'header header'
'aside main'
'aside footer';
height: 100vh;
}
.header { grid-area: header; background: #b3c0d1; }
.aside { grid-area: aside; background: #d3dce6; }
.main { grid-area: main; background: #e9eef3; }
.footer { grid-area: footer; background: #b3c0d1; }
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="aside">Aside</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>
</body>
</html>Responsive Layout with Grid
Using auto-fill and minmax() functions, Grid can create a fluid, responsive layout without media queries.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
justify-content: space-between;
gap: 10px;
}
.item { background: pink; height: 100px; }
</style>
</head>
<body>
<div class="box">
<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 class="item">7</div>
<div class="item">8</div>
</div>
</body>
</html>Compatibility Comparison
Flexbox enjoys broader browser support, while Grid, though powerful, has slightly lower compatibility and should be used after considering the target audience’s browsers.
Conclusion
Both Grid and Flexbox are strong layout tools; mastering both allows developers to choose the most suitable method for each project scenario.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.