网格布局（Grid Layout）是 CSS 中强大的布局系统，特别适合构建复杂的二维布局。以下是网格布局的主要优点：
1. 二维布局能力
- 同时控制行和列的布局
- 可以精确控制元素在水平和垂直方向上的位置
- 比浮动和定位布局更直观易懂
.area-grid {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 80px 1fr 60px;
}
2. 灵活的轨道系统
- 支持多种单位：px、fr、%、auto 等
- 可以使用
repeat()函数简化重复定义 fr单位能够按比例分配剩余空间
.fr-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 按比例分配 */
}
.repeat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 重复4列 */
}
3. 响应式设计友好
auto-fit和minmax()实现自适应布局- 能够根据屏幕尺寸自动调整列数和大小
- 无需媒体查询即可实现响应式效果
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
4. 强大的对齐控制
- 提供
justify-items、align-items等属性控制对齐 - 可以单独控制某个网格项的对齐方式
- 支持内容分布和对齐的精细控制
5. 网格线和区域命名
- 可以为网格线和区域命名，提高代码可读性
- 便于团队协作和维护
- 使复杂布局更易于理解和修改
.named-grid {
display: grid;
grid-template-columns: [start] 1fr [middle] 1fr [end];
grid-template-rows: [top] 100px [center] 100px [bottom];
}
.area-grid {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
6. 子元素定位灵活
- 可以精确控制子元素跨越的行数和列数
- 支持重叠布局
- 子元素可以脱离正常文档流进行定位
.item1 {
grid-column: 1 / 3; /* 占据第1到第3列 */
grid-row: 1 / 2; /* 占据第1行 */
}
7. 与 Flexbox 互补
- Grid 适合整体页面布局
- Flexbox 适合一维布局（行或列）
- 两者结合使用可以构建更复杂的界面
8. 浏览器支持良好
- 现代浏览器都支持 CSS Grid
- 有良好的回退方案支持旧浏览器
- 性能优化良好
9. 简化代码
- 减少了对额外包装元素的需求
- 无需清除浮动等传统布局技巧
- 代码更简洁、可读性更强
总的来说，CSS Grid 提供了一种更直观、更强大的布局方式，特别适合构建复杂的网页布局，是现代 Web 开发中不可或缺的工具。
具体内容实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格布局详解</title>
<style>
/* 基础样式 */
.container {
margin: 20px 0;
padding: 15px;
border: 2px solid #333;
}
.box {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
font-weight: bold;
}
/* 1. 基本网格布局 */
.basic-grid {
display: grid; /* 启用网格布局 */
grid-template-columns: 200px 200px 200px; /* 定义3列，每列200px */
grid-template-rows: 100px 100px; /* 定义2行，每行100px */
gap: 10px; /* 网格间隙 */
}
/* 2. 使用fr单位的网格 */
.fr-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* fr单位：按比例分配剩余空间 */
grid-template-rows: 100px 100px;
gap: 10px;
}
/* 3. 重复网格 */
.repeat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 重复4次，每列占1份空间 */
grid-template-rows: repeat(2, 100px); /* 重复2次，每行100px */
gap: 10px;
}
/* 4. 自动网格 */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 自适应列数 */
gap: 10px;
}
/* 5. 网格线命名 */
.named-grid {
display: grid;
grid-template-columns: [start] 1fr [middle] 1fr [end]; /* 命名网格线 */
grid-template-rows: [top] 100px [center] 100px [bottom];
gap: 10px;
}
/* 6. 网格区域命名 */
.area-grid {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 80px 1fr 60px;
gap: 10px;
height: 300px;
}
.header {
grid-area: header;
background-color: #e74c3c;
}
.sidebar {
grid-area: sidebar;
background-color: #2ecc71;
}
.main {
grid-area: main;
background-color: #f39c12;
}
.footer {
grid-area: footer;
background-color: #9b59b6;
}
/* 7. 子元素定位 */
.positioned-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.item1 {
grid-column: 1 / 3; /* 占据第1到第3列 */
grid-row: 1 / 2; /* 占据第1行 */
background-color: #e74c3c;
}
.item2 {
grid-column: 3 / 5; /* 占据第3到第5列 */
grid-row: 1 / 3; /* 占据第1到第3行 */
background-color: #2ecc71;
}
.item3 {
grid-column: 1 / 2; /* 占据第1列 */
grid-row: 2 / 4; /* 占据第2到第4行 */
background-color: #f39c12;
}
.item4 {
grid-column: 2 / 4; /* 占据第2到第4列 */
grid-row: 3 / 4; /* 占据第3行 */
background-color: #9b59b6;
}
</style>
</head>
<body>
<h1>网格布局(Grid Layout)详解</h1>
<!-- 1. 基本网格布局 -->
<div class="container">
<h2>1. 基本网格布局</h2>
<div class="basic-grid">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<p>使用 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 定义网格结构</p>
</div>
<!-- 2. 使用fr单位 -->
<div class="container">
<h2>2. 使用fr单位</h2>
<div class="fr-grid">
<div class="box">1fr</div>
<div class="box">2fr</div>
<div class="box">1fr</div>
<div class="box">1fr</div>
<div class="box">2fr</div>
<div class="box">1fr</div>
</div>
<p><code>fr</code> 单位表示可用空间的分数</p>
</div>
<!-- 3. 重复网格 -->
<div class="container">
<h2>3. 重复网格</h2>
<div class="repeat-grid">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>
<p>使用 <code>repeat()</code> 函数简化重复的网格定义</p>
</div>
<!-- 4. 自动网格 -->
<div class="container">
<h2>4. 自动网格</h2>
<div class="auto-grid">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<p><code>auto-fit</code> 和 <code>minmax()</code> 实现响应式网格</p>
</div>
<!-- 5. 网格区域命名 -->
<div class="container">
<h2>5. 网格区域命名</h2>
<div class="area-grid">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box main">Main Content</div>
<div class="box footer">Footer</div>
</div>
<p>使用 <code>grid-template-areas</code> 创建复杂的布局结构</p>
</div>
<!-- 6. 子元素定位 -->
<div class="container">
<h2>6. 子元素定位</h2>
<div class="positioned-grid">
<div class="box item1">1 (跨度: 2列, 1行)</div>
<div class="box item2">2 (跨度: 2列, 2行)</div>
<div class="box item3">3 (跨度: 1列, 2行)</div>
<div class="box item4">4 (跨度: 2列, 1行)</div>
</div>
<p>使用 <code>grid-column</code> 和 <code>grid-row</code> 精确控制子元素位置</p>
</div>
</body>
</html>
