升级补丁
欢迎来到《从基础到辉煌》课程第九讲。在本次讲座中，我们将探索 css 网格，这是一个强大的布局系统，可让您轻松创建复杂的网页布局。虽然 flexbox 非常适合单维布局（行或列），但 css grid 提供了二维布局系统，使您能够同时控制行和列。
什么是 css 网格？css 网格是 css 中的布局系统，可以创建灵活的、响应式的、基于网格的布局。它允许您将元素对齐行和列，比 flexbox 提供更多对布局结构的控制。
网格术语在深入示例之前，让我们先熟悉一些关键术语：
网格容器：包含网格的父元素。网格项：网格容器内的子元素。网格线：网格的水平和垂直分割线。网格轨道：两条网格线之间的空间，形成行或列。网格单元：由行和列相交形成的网格中最小的单个单元。 1.基本网格结构要开始使用 grid，请将 display: grid 应用到容器。
立即学习“前端免费学习笔记（深入）”；
示例： .grid-container { display: grid; }登录后复制一旦应用了display: grid，容器的子元素就成为网格项。
2.定义网格列和行您可以使用 grid-template-columns 和 grid-template-rows 属性定义网格的行数和列数。
示例：创建一个 3 列 2 行的网格。 .grid-container { display: grid; grid-template-columns: 100px 200px 100px; grid-template-rows: 50px 150px; }登录后复制这将创建一个网格：
3 列：第一列宽 100px，第二列宽 200px，第三列宽 100px。2 行：第一行高 50 像素，第二行高 150 像素。 3.使用小数单位 (fr)css grid 引入了分数单位 fr，它表示网格容器中可用空间的一小部分。这是在网格项之间分配空间的灵活方式。
示例：使用 fr 平均划分空间。 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; }登录后复制在此示例中，三列将具有相等的宽度，每列占用可用空间的一小部分。
4.放置网格项目您可以使用 grid-column 和 grid-row 属性控制每个网格项的放置位置。这些属性允许您指定项目的开始和结束位置。
示例： .grid-item { grid-column: 1 / 3; /* this item spans from column 1 to column 3 */ grid-row: 1 / 2; /* this item is placed in the first row */ }登录后复制在这种情况下，网格项将跨越前两列，但会放置在第一行。
5.网格间隙grid-gap 属性在水平和垂直方向的网格项之间添加空间。
示例：在列和行之间添加间隙。 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; }登录后复制这会在所有网格项之间创建相等的 20px 间隙。
6.自动调整和自动填充自动调整和自动填充是强大的功能，允许网格根据容器的大小自动放置尽可能多的列。
自动调整示例： .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }登录后复制在这里，网格将自动适应尽可能多的列，确保每列至少 100 像素宽，但可以增长以填充可用空间。
实际示例：简单的网格布局让我们使用 css grid 创建一个简单的网格布局。
html:
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div></div>登录后复制css:
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;}.grid-item { background-color: #ddd; padding: 20px; text-align: center;}登录后复制在此示例中：
.grid-container 具有使用 repeat(3, 1fr) 创建的三个等宽列。网格间隙设置为 10px 以在网格项之间添加空间。每个 .grid-item 都应用了填充和背景颜色，以提高可见性。 7.嵌套网格您还可以嵌套网格，其中网格项本身成为网格容器。这允许更复杂的布局。
示例： .nested-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; }登录后复制您可以应用此概念在另一个网格内创建一个网格，以便更精细地控制您的布局。
使用 css 网格的响应式设计css 网格非常适合响应式设计。您可以使用媒体查询根据屏幕尺寸调整列数。
示例：创建响应式网格。 .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } @media screen and (max-width: 768px) { .grid-container { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 480px) { .grid-container { grid-template-columns: 1fr; } }登录后复制在此示例中：
网格从三列开始。在小于 768px 的屏幕上，网格切换为两列。在小于 480 像素的屏幕上，网格会折叠成单列。 练习运动使用 css 网格创建带有页眉、主要内容、侧边栏和页脚的网页布局。使用 grid-template-columns 和 grid-template-rows 定义网格结构。通过调整不同屏幕尺寸上的列数来使布局响应。下一步：在下一堂课中，我们将探索高级 css 网格技术，包括网格区域、模板布局以及 grid 与 flexbox 的结合。敬请期待！
在 linkedin 上关注我-里多伊·哈桑
以上就是CSS 网格 - 深入探讨的详细内容！
