真的不考虑下 Grid 布局？有时候真的很方便！
本文探讨了Grid布局相较于Flex布局的优势，特别是在宫格类布局、后台管理布局和响应式布局中的应用。通过具体的代码示例，展示了Grid布局的简洁性和高效性，以及如何利用其特性简化开发过程。尽管Grid在某些老旧浏览器中的兼容性不如Flex，但在现代浏览器中已得到广泛支持。选择合适的布局方式是关键。
前言
相信很多前端开发者在日常开发中已经将 Flex 布局运用得非常熟练，几乎所有布局都可以通过 Flex 解决。然而，当我接触到 Grid 布局后，发现有些场景下 Grid 能够更加轻松地完成任务。今天通过几个场景来分享 Grid 布局的优势。
宫格类布局
场景描述
假设我们需要实现一个固定宽度 1000px、高度自适应的宫格布局。每个子元素宽度为 300px，一行展示 3 个，元素从左到右排列，最左边与最右边的元素需要紧挨父元素的左右边框。如下图所示：
使用 Flex 实现
Flex 实现这种布局时需要处理好换行和双端对齐。当最后一行元素不足三个时，会出现对齐问题，需要额外处理。
<!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>
由于最后一行不足 3 个，页面布局和预期不同。常见的处理方式是在最后一行补充空元素以填充空间，但这种方式显得繁琐。
使用 Grid 实现
面对这种布局，Grid 可以非常轻松地实现：
<!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>
使用 Grid，只需要简单地设置列宽和列数，布局就自动排列，无需处理额外问题。
实现后台管理布局
场景描述
在实现后台管理布局时，使用 Flex 需要嵌套多个额外的标签，而使用 Grid 则更加简洁且高效。
使用 Grid 实现
<!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>
Grid 布局可以通过grid-template-areas清晰地定义各个区域的布局。布局结构简单易维护，修改布局时只需调整 CSS 而无需改变 HTML 结构。
实现响应式布局
借助 Grid 的 auto-fill 和 minmax 函数，可以轻松实现响应式布局。
<!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>
Grid 的 auto-fill 和 minmax 能够自动调整布局，根据屏幕宽度动态适应内容，减少了手动编写媒体查询的复杂度。
兼容性对比
虽然 Grid 布局在某些老旧浏览器中的兼容性不如 Flex，但在现代浏览器中，Grid 布局已经得到了广泛的支持。
| 浏览器 | Grid 支持情况 |
|---|---|
| Chrome | 支持 |
| Firefox | 支持 |
| Safari | 支持 |
| Edge | 支持 |
| IE (11及以下) | 不支持 |
使用 Grid 布局前，需考虑用户的浏览器版本，以确保兼容性。
结尾
Flex 和 Grid 各有优劣，关键在于根据场景选择最合适的布局方式。在二维布局和复杂页面结构中，Grid 可以简化布局并提高可维护性。希望大家在开发中掌握这两种布局方式，灵活运用。