2019年，是时候认真学一波Grid布局了

2024-01-31 18:26:56

新年伊始，Grid布局规范发布两年有余，本文将结合案例深度讲解Grid布局的实用技巧，相信看完后你对Grid布局会有一个全新的认识。

刚过去的2018年，Flex布局规范正式成为W3C推荐标准，并且已经得到绝大多数现代浏览器的支持。Flex布局的广泛使用，极大的简化了前端页面布局的编写，开发效率和体验得到了显著的提升。

在Flex布局规范发布之前，前端页面布局往往是通过浮动（float）+定位（position）来实现的，这两种方式不但编写繁琐，而且容易出现各种兼容性问题。如今，Flex布局规范的普及，彻底终结了浮动+定位布局的时代。

而2019年，是时候认真学一波Grid布局了。

Grid布局简介

Grid布局规范全称“CSS Grid Layout Module”，于2017年6月发布，同样由W3C制定。与Flex布局类似，Grid布局也是一种CSS布局规范，但与Flex布局相比，Grid布局的适用场景更广，可以实现更复杂的页面布局。

与Flex布局只能在一维方向上排列元素不同，Grid布局可以在二维方向上排列元素，也就是说，Grid布局既可以实现水平排列，也可以实现垂直排列，并且还可以实现更复杂的网格布局。

Grid布局的优势

与Flex布局相比，Grid布局具有以下优势：

可以实现更复杂的页面布局
语义更清晰，代码可读性更高
布局更灵活，可以根据需要调整元素的大小和位置

Grid布局的应用场景

Grid布局非常适合于以下场景：

网格布局
响应式布局
仪表盘布局
表格布局

Grid布局的语法

Grid布局的语法主要包括以下几个方面：

grid-template-columns：定义列布局
grid-template-rows：定义行布局
grid-gap：定义元素之间的间距
grid-auto-flow：定义元素的排列方式
grid-column-start/grid-column-end/grid-row-start/grid-row-end：定义元素的位置

Grid布局的案例

下面通过一个案例来讲解Grid布局的用法。

假设我们有一个以下HTML结构的页面：

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

我们希望将这个页面布局成以下效果：

Grid布局案例

使用Grid布局，我们可以通过以下CSS代码实现：

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 60px 1fr 60px;
  grid-gap: 10px;
  height: 100vh;
}

.header {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.sidebar {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
}

.content {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}

.footer {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
}