◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
CSS 网格 – 轻松构建复杂布局
ID:15535 / 打印
第 15 讲：css 网格 – 轻松构建复杂布局
在本次讲座中，我们将深入探讨 css 网格，这是一个强大的布局系统，可让您完全控制行和列。虽然 flexbox 非常适合一维布局（行或列），但 grid 允许您处理二维布局，这意味着您可以精确地设计整个网页布局。
1.什么是 css 网格？
css 网格布局，通常称为 grid，是一种 2d 布局系统，旨在同时管理行和列。您可以将其视为一个矩阵或电子表格，其中每个元素都放置在网格单元中，从而实现干净且有组织的布局。
2.如何创建网格
要开始使用网格，您需要通过设置 display: grid 将容器定义为网格。然后，您将使用 grid-template-rows 和 grid-template-columns 属性定义行数和列数。
示例：
<div class="grid-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
.grid-container { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px; gap: 10px; /* space between the grid items */ } .item { background-color: #4caf50; padding: 20px; color: white; text-align: center; } 这将创建一个 2x2 网格，每个单元格 100 像素 x 100 像素，单元格之间有 10 像素间隙。
立即学习“前端免费学习笔记（深入）”；
3.定义网格区域
您还可以使用 grid-area 属性为要占据的项目定义特定的网格区域。这使您可以准确控制项目在网格中的放置位置。
示例：
<div class="grid-container"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="main">main content</div> <div class="footer">footer</div> </div>
.grid-container { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr auto; gap: 10px; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; } 此示例创建一个基本布局，其中页眉和页脚跨越两列，侧边栏和主要内容占据各自的列。 grid-template-areas 属性允许您定义网格的结构以及每个区域的名称。
4.响应式网格的自动调整和自动填充
css 网格最好的部分之一是它可以轻松地实现响应式。自动调整和自动填充属性可以根据可用空间自动调整列数。
示例：
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } 在此示例中，网格将自动创建容器内尽可能多的列，每列至少 150px 宽。如果有多余的空间，列将拉伸以填充剩余区域。
5.网格对齐
您可以使用 justify-items 和 align-items 来对齐网格内的项目。
- justify-items：在网格单元内水平对齐项目。
- align-items：在网格单元内垂直对齐项目。
示例：
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; align-items: center; gap: 10px; } .item { background-color: #ff5722; padding: 20px; color: white; text-align: center; } 这将使所有项目在其网格单元内水平和垂直居中。
6.嵌套网格
css 网格还支持嵌套网格，允许您在网格项内创建网格以实现更复杂的布局。
示例：
<div class="grid-container"> <div class="item"> <div class="nested-grid"> <div class="nested-item">nested 1</div> <div class="nested-item">nested 2</div> </div> </div> <div class="item">item 2</div> <div class="item">item 3</div> </div>
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .nested-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .nested-item { background-color: #FFC107; padding: 10px; color: black; } 在此示例中，其中一个网格项包含嵌套网格，允许更灵活和详细的布局。
7.网格与 flexbox：何时分别使用
- 当您需要管理一个方向（行或列）的项目布局时，请使用 flexbox。
- 当您需要同时管理行和列以实现复杂的多维布局时，请使用网格。
结论
css 网格是网页设计的游戏规则改变者，提供了一种强大的方法来以最少的努力构建复杂且响应式的布局。无论您是在处理博客布局、仪表板还是网站结构，网格都可以让您灵活地轻松控制行和列。
在 linkedin 上关注我
里多伊·哈桑
