Grid 布局比 Flexbox 更适合做二维布局，学会了写页面效率翻倍。

基础网格

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

三列等宽网格，就这么简单。

响应式网格

grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

自动适配屏幕宽度，不需要写媒体查询。

区域布局

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

用命名区域来定义布局，代码可读性极好。

Grid 布局的功能远不止这些，但这三板斧已经能覆盖大部分场景了。