CSS的Grid布局详解

概览

CSS Grid布局，俗称"网格布局"，是前端开发界的"终极武器"之一。如果说Flex是"瑞士军刀"，那Grid就是"变形金刚"！它让你在页面上画个"棋盘"，想怎么摆就怎么摆，横着竖着都能玩，还能跨行跨列，简直是布局界的"万金油"。

Grid布局就像是给页面画了个"格子纸"，每个元素都能精确地放在你想要的位置。无论是复杂的杂志排版、仪表盘布局，还是响应式网站，Grid都能轻松拿下。以前那些让人头秃的复杂布局，Grid一句话就能搞定，真是"前端人的福音"。

为什么选择Grid布局

在Grid还没出道之前，前端们可是"八仙过海，各显神通"。有靠float"凑合"的，有靠Flex"硬撑"的，还有靠table"复古"的。这些方法各有各的"槽点"：

Float布局：脱离文档流，各种clearfix hack，兼容性一言难尽。
Flex布局：只能一维布局，复杂二维布局就"踢到钢板"。
Table布局：语义化差，响应式支持有限，维护困难。

Grid布局就是为了解决这些老大难问题而生，它支持二维布局，既能控制行，也能控制列，还能精确控制每个元素的位置，复杂页面、响应式设计，Grid都能轻松拿捏，开发效率和页面可维护性直接起飞！

Grid布局的核心概念

要玩转Grid布局，咱们得先搞清楚几个"灵魂概念"，不然分分钟就会被绕晕，写着写着就成了屎山代码。

容器（Container）和元素（Item）

容器：加了display: grid的那个元素，就是"棋盘"。
元素：容器里的直接子元素，都是"棋子"。

网格线（Grid Lines）

网格线 ：Grid布局里最重要的概念，就是"棋盘的线"。
- 水平网格线：从上到下编号，1、2、3...
- 垂直网格线：从左到右编号，1、2、3...
- 负数编号：从后往前数，-1、-2、-3...

网格轨道（Grid Tracks）

行轨道：水平方向的轨道，就是"横线"。
列轨道：垂直方向的轨道，就是"竖线"。

网格单元格（Grid Cell）

网格单元格：网格线围成的最小单位，就是"格子"。

网格区域（Grid Area）

网格区域：由多条网格线围成的区域，可以包含多个单元格。

举个栗子

css 复制代码

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

html 复制代码

<div class="container">
  <div>棋子1</div>
  <div>棋子2</div>
  <div>棋子3</div>
  <div>棋子4</div>
  <div>棋子5</div>
  <div>棋子6</div>
</div>

这时候，你就有了一个3列2行的"棋盘"，每个"棋子"会自动填到对应的"格子"里。

小结

网格线、网格轨道、网格单元格这些概念，理解透了，后面用Grid各种骚操作才不会"踢到钢板"。搞清楚谁是棋盘，谁是棋子，谁在哪个格子，布局就能玩得飞起！

display属性详解

说到Grid布局，display属性绝对是"开门钥匙"。它的作用就是------告诉浏览器：我要用Grid布局了，你给我画个"棋盘"出来。

display到底是啥？

display用来设置元素的显示类型。对于Grid布局，我们主要用display: grid和display: inline-grid这两个值。

常见取值

display: grid

作用：创建一个块级网格容器。
特点：容器会占满父元素的宽度，就像display: block一样。
适用场景：大多数Grid布局场景，特别是页面主体布局。

css 复制代码

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

display: inline-grid

作用：创建一个行内网格容器。
特点：容器宽度由内容决定，不会占满父元素宽度。
适用场景：需要Grid布局但不想占满整行的情况。

css 复制代码

.container {
  display: inline-grid;
  grid-template-columns: 100px 100px;
}

举个栗子

css 复制代码

/* 块级网格容器 */
.block-grid {
  display: grid;
  grid-template-columns: 200px 200px;
  background: #f0f0f0;
  border: 2px solid #333;
}

/* 行内网格容器 */
.inline-grid {
  display: inline-grid;
  grid-template-columns: 100px 100px;
  background: #e0e0e0;
  border: 2px solid #666;
}

html 复制代码

<div class="block-grid">
  <div>块级网格1</div>
  <div>块级网格2</div>
</div>

<span class="inline-grid">
  <div>行内网格1</div>
  <div>行内网格2</div>
</span>

注意事项

只有直接子元素才会成为Grid元素，孙子元素不会。
Grid容器会忽略子元素的float、display: inline-block等属性。
子元素会自动变成Grid元素，不需要额外设置。

小结

display属性就是Grid布局的"入场券"，告诉浏览器你要开始玩Grid了。合理选择grid还是inline-grid，能让你的布局更符合设计需求，避免"画蛇添足"。

grid-template-columns属性详解

说完display的"入场券"，接下来就得聊聊grid-template-columns这个"列规划师"了。grid-template-columns的作用就是：定义网格的列轨道，告诉浏览器你要几列，每列多宽。

grid-template-columns到底是啥？

grid-template-columns用来定义网格容器的列轨道大小。简单来说，就是"我要几列，每列多宽"。你可以用像素、百分比、fr单位等各种方式来定义。

常见取值

固定尺寸

像素值 ：grid-template-columns: 200px 200px 200px;
- 每列都是固定的200px宽度。
百分比 ：grid-template-columns: 33.33% 33.33% 33.33%;
- 每列占容器宽度的三分之一。

弹性单位

fr单位 ：grid-template-columns: 1fr 2fr 1fr;
- 第一列占1份，第二列占2份，第三列占1份，总共4份。
auto ：grid-template-columns: 200px auto 200px;
- 第一列和第三列固定200px，中间列自适应。

重复函数

repeat() ：grid-template-columns: repeat(3, 1fr);
- 重复3次，每次1fr，相当于1fr 1fr 1fr。
repeat() + auto-fit ：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- 自动适应容器宽度，每列最小200px，最大1fr。

举个栗子

css 复制代码

.container1 {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.container2 {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.container3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

html 复制代码

<div class="container1">
  <div>固定200px</div>
  <div>固定200px</div>
  <div>固定200px</div>
</div>

<div class="container2">
  <div>1份</div>
  <div>2份</div>
  <div>1份</div>
</div>

高级用法

minmax()函数

css 复制代码

.container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr);
}

第一列最小200px，最大1fr。
第二列最小300px，最大2fr。

混合单位

css 复制代码

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr auto;
}

第一列固定200px。
第二列占1份剩余空间。
第三列占2份剩余空间。
第四列自适应内容宽度。

注意事项

如果列数不够，Grid会自动创建隐式列。
fr单位只能用于Grid布局，不能用于其他CSS属性。
auto-fit和auto-fill的区别：auto-fit会收缩空列，auto-fill不会。

小结

grid-template-columns就像是Grid布局的"列规划师"，决定了你的"棋盘"有几列，每列多宽。合理使用各种单位，能让你的布局既灵活又精确，响应式设计so easy！

grid-template-rows属性详解

说完了"列规划师"，咱们再来聊聊grid-template-rows这个"行规划师"。grid-template-rows的作用就是：定义网格的行轨道，告诉浏览器你要几行，每行多高。

grid-template-rows到底是啥？

grid-template-rows用来定义网格容器的行轨道大小。简单来说，就是"我要几行，每行多高"。用法和grid-template-columns基本一样，只是控制的是行而不是列。

常见取值

固定尺寸

像素值 ：grid-template-rows: 100px 100px 100px;
- 每行都是固定的100px高度。
百分比 ：grid-template-rows: 33.33% 33.33% 33.33%;
- 每行占容器高度的三分之一。

弹性单位

fr单位 ：grid-template-rows: 1fr 2fr 1fr;
- 第一行占1份，第二行占2份，第三行占1份。
auto ：grid-template-rows: 100px auto 100px;
- 第一行和第三行固定100px，中间行自适应。

重复函数

repeat() ：grid-template-rows: repeat(3, 1fr);
- 重复3次，每次1fr。
repeat() + auto-fit ：grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
- 自动适应容器高度。

举个栗子

css 复制代码

.container1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

.container2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}

.container3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

html 复制代码

<div class="container1">
  <div>行1列1</div>
  <div>行1列2</div>
  <div>行1列3</div>
  <div>行2列1</div>
  <div>行2列2</div>
  <div>行2列3</div>
</div>

高级用法

混合使用

css 复制代码

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: 100px auto 150px;
}

3列：固定200px + 1fr + 2fr。
3行：固定100px + 自适应 + 固定150px。

响应式行高

css 复制代码

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

列和行都能自动适应容器大小。

注意事项

如果行数不够，Grid会自动创建隐式行。
行高通常由内容决定，除非明确设置。
使用fr单位时，要考虑容器的总高度。

小结

grid-template-rows就像是Grid布局的"行规划师"，决定了你的"棋盘"有几行，每行多高。合理设置行高，能让你的布局更美观，内容更协调。

gap属性详解

有时候，元素之间需要点"呼吸空间"，怎么办？这时候就得靠gap来"安排间距"了！

gap到底是啥？

gap用来设置网格元素之间的间距。简单来说，就是"格子之间的空隙"。你可以分别设置行间距和列间距，也可以统一设置。

语法和常见用法

统一间距

gap: 20px;
- 行间距和列间距都是20px。

分别设置

gap: 20px 10px;
- 行间距20px，列间距10px。

使用row-gap和column-gap

row-gap: 20px;
- 只设置行间距。
column-gap: 10px;
- 只设置列间距。

举个栗子

css 复制代码

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

.container2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 10px;
}

.container3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px;
  column-gap: 10px;
}

html 复制代码

<div class="container1">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
  <div>元素4</div>
  <div>元素5</div>
  <div>元素6</div>
</div>

gap不会影响网格线的位置，只是视觉上的间距。
可以用百分比、em、rem等单位。
负值无效，会被忽略。

gap就是Grid布局里的"间距神器"，让你的元素不会"挤成一团"，布局更美观，用户体验也更好。合理利用gap，页面布局so easy！

实际应用案例

说了这么多理论，是时候来点"实战"了！Grid布局在实际开发中可是"万金油"，各种复杂布局都能轻松拿下。

经典页面布局

三栏布局

css 复制代码

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas: 
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  min-height: 100vh;
}

.header {
  grid-area: header;
  background: #6ab6d8;
}

.sidebar {
  grid-area: sidebar;
  background: #2e86bb;
}

.main {
  grid-area: main;
  background: #f0f0f0;
}

.aside {
  grid-area: aside;
  background: #2e86bb;
}

.footer {
  grid-area: footer;
  background: #333;
  color: white;
}

响应式卡片布局

css 复制代码

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
}

复杂布局案例

杂志排版

css 复制代码

.magazine {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 100px);
  gap: 10px;
}

.featured {
  grid-column: 1 / 7;
  grid-row: 1 / 5;
  background: #6ab6d8;
}

.sidebar {
  grid-column: 7 / 13;
  grid-row: 1 / 9;
  background: #2e86bb;
}

.article1 {
  grid-column: 1 / 4;
  grid-row: 5 / 7;
  background: #f0f0f0;
}

.article2 {
  grid-column: 4 / 7;
  grid-row: 5 / 7;
  background: #e0e0e0;
}

.ad {
  grid-column: 1 / 7;
  grid-row: 7 / 9;
  background: #ffd700;
}

仪表盘布局

css 复制代码

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 60px repeat(3, 1fr);
  gap: 15px;
  padding: 20px;
}

.header {
  grid-column: 1 / -1;
  background: #333;
  color: white;
}

.widget {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
}

.widget.large {
  grid-column: span 2;
  grid-row: span 2;
}

动画和交互

网格动画

css 复制代码

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

.item {
  background: #6ab6d8;
  transition: all 0.3s ease;
}

.item:hover {
  transform: scale(1.05);
  background: #2e86bb;
}

动态网格

css 复制代码

.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.item {
  background: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}

Grid布局在实际应用中简直就是"万能钥匙"，从简单的三栏布局到复杂的杂志排版，从响应式卡片到动态仪表盘，Grid都能轻松拿下。合理运用Grid的各种特性，能让你的页面布局既美观又实用。

CSS Grid布局就是前端布局界的"终极武器"，不管你是要做响应式、复杂排版、还是动态布局，Grid都能帮你一把梭。刚开始用可能会有点懵，但多写几次你就会发现：真香！

Grid布局比Flex更强大，支持二维布局，还能精确控制每个元素的位置。虽然学习曲线稍微陡峭一点，但一旦掌握了，你就再也不想回到float时代了。

别怕踩坑，屎山代码谁没写过？多动手、多试错，慢慢你就能把Grid玩得飞起。愿你早日告别各种hack，让页面布局优雅丝滑，开发效率起飞！

如果觉得有用，记得收藏+分享，前端路上一起进步！