与网格布局相关的CSS属性
本文解释了与网格布局相关的CSS属性。
您可以学习如何描述网格和内联网格。
YouTube Video
预览的HTML
css-grid.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-grid.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>grid</h3>
23 <section style="width: 100%; height: 350px;">
24 <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
25 <section class="sample-view">
26 <div class="grid-box">
27 <div class="grid-item">Item 1</div>
28 <div class="grid-item">Item 2</div>
29 <div class="grid-item">Item 3</div>
30 <div class="grid-item">Item 4</div>
31 <div class="grid-item">Item 5</div>
32 <div class="grid-item">Item 6</div>
33 </div>
34 </section>
35 </section>
36 <section style="width: 100%; height: 550px;">
37 <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
38 <section class="sample-view">
39 <div class="grid-container" style="color: #666;">
40 <header class="grid-header">Header</header>
41 <aside class="grid-sidebar">Sidebar</aside>
42 <article class="grid-content">
43 <p>Content</p>
44 </article>
45 <aside class="grid-ads">Ads</aside>
46 <footer class="grid-footer">Footer</footer>
47 </div>
48 </section>
49 </section>
50 </article>
51 <article>
52 <h3>gap</h3>
53 <section style="height: 300px;">
54 <header><h4>display: grid; gap: 30px 10px;</h4></header>
55 <section class="sample-view">
56 <div class="gap-grid-container">
57 <div>Item 1</div>
58 <div>Item 2</div>
59 <div>Item 3</div>
60 <div>Item 4</div>
61 <div>Item 5</div>
62 <div>Item 6</div>
63 </div>
64 </section>
65 </section>
66 <section>
67 <header><h4>display: flex; gap: 50px;</h4></header>
68 <section class="sample-view">
69 <div class="gap-flex-container">
70 <div>Item 1</div>
71 <div>Item 2</div>
72 <div>Item 3</div>
73 </div>
74 </section>
75 </section>
76 </article>
77 <article>
78 <h3>grid-template-areas</h3>
79 <section style="height: 350px;">
80 <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
81 <section class="sample-view">
82 <div class="grid-template-areas-container">
83 <div class="grid-template-areas-header">Header</div>
84 <div class="grid-template-areas-sidebar">Sidebar</div>
85 <div class="grid-template-areas-content">Content</div>
86 <div class="grid-template-areas-footer">Footer</div>
87 </div>
88 </section>
89 </section>
90 </article>
91 <article>
92 <h3>inline-grid</h3>
93 <section>
94 <header><h4>display: inline-grid</h4></header>
95 <section class="sample-view">
96 Here is an inline grid:
97 <span class="inline-grid-container">
98 <div class="inline-grid-item">1</div>
99 <div class="inline-grid-item">2</div>
100 <div class="inline-grid-item">3</div>
101 <div class="inline-grid-item">4</div>
102 </span>
103 This is contained within a paragraph.
104 </section>
105 </section>
106 </article>
107 </main>
108</body>
109</html>网格布局
grid
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 200px auto;
4 grid-template-rows: 100px auto 50px;
5 gap: 10px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16 border: 2px solid black;
17}网格是一种用于在二维行和列中对齐元素的布局系统。使用网格，您可以轻松灵活地构建传统float或position方法难以实现的复杂布局。虽然flexbox在一维布局方面表现出色，但网格更适用于二维布局。
grid-box类通过在display属性中指定grid来应用网格布局。该元素称为网格容器。grid-template-columns属性指定网格列的宽度。在此示例中，第一列是100px，第二列是200px，第三列占用剩余空间（auto）。grid-template-rows属性指定网格行的高度。第一行是100px，第二行是自动（auto），第三行是50px高。gap属性设置网格项之间的间距。为列和行之间添加10px的间距。
基本术语
- 网格容器是一个
display属性设置为grid的元素，其子元素成为网格项。 - 网格项是直接位于网格容器下的子元素。
主要网格属性
grid-template-columns & grid-template-rows
1.container {
2 grid-template-columns: 1fr 2fr 1fr;
3}grid-template-columns和grid-template-rows属性定义每列和每行的大小。- 可以使用
px和%等单位，以及fr（分数）来指定剩余空间的比例。- 在此示例中，有三列，第二列的宽度是其他列的两倍。
grid-column & grid-row
1.container {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr); /* 4 columns */
4 grid-template-rows: repeat(3, 100px); /* 3 rows */
5}
6.item {
7 grid-column: 2 / 4;
8 grid-row: 1 / 3;
9}
10/* Grid line number (3 rows & 4 columns)
11 1 2 3 4 5
121 +---+---+---+---+
13 | | o | o | |
142 +---+---+---+---+
15 | | o | o | |
163 +---+---+---+---+
17 | | | | |
184 +---+---+---+---+
19*/-
grid-column和grid-row是用来指定网格项目位置的属性。编号不是基于单元格，而是基于 网格线。- 在这个示例中，该项目从第 2 条到第 4 条垂直网格线，以及从第 1 条到第 3 条水平网格线。换句话说，它占据了 第 2 和第 3 列，以及第 1 和第 2 行 的单元格。
-
网格线 是指将网格容器内的行和列分隔开的线。网格线从 1 开始自动编号，并被用作行和列的 边界。
- 例如，一个包含 4 列的网格有 5 条垂直网格线，编号从 1 到 5，每个单元格都位于这些线之间的区域内。
grid-auto-rows & grid-auto-columns
1.container {
2 display: grid;
3 grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
4 grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
5 grid-auto-rows: 150px; /* Automatically added rows will be 150px */
6 grid-auto-columns: 100px; /* Automatically added columns will be 100px */
7}
8
9.item {
10 grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11 grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}grid-auto-rows和grid-auto-columns是控制在未明确定义网格布局线或列时自动生成的行和列大小的属性。- 在此示例中，明确定义了 2 行和 2 列，但如果添加更多元素，则会根据
grid-auto-rows和grid-auto-columns自动生成新的行或列。
- 在此示例中，明确定义了 2 行和 2 列，但如果添加更多元素，则会根据
justify-items & align-items
1.container {
2 justify-items: center; /* Center items horizontally */
3 align-items: center; /* Center items vertically */
4}- 水平 (
justify-items) 和垂直 (align-items) 对齐网格项。
grid-area
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5 grid-area: 1 / 2 / 3 / 4;
6}grid-area是一个允许同时 指定行和列范围 以定位网格项目的属性。你使用 网格线编号 来指定位置，而不是单元格编号。- 在这个示例中，该项目从第 1 条到第 3 条水平网格线，以及从第 2 条到第 4 条垂直网格线。换句话说，它占据了 第 1 和第 2 行，以及第 2 和第 3 列 的单元格范围。
gap
1.container {
2 gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}gap在列和行之间添加空间。您还可以使用column-gap和row-gap分别指定列与行之间的间距。
grid-auto-flow
1.container {
2 grid-auto-flow: column; /* Add items in the column direction */
3}grid-auto-flow是一个属性，它设置项目的排列方向，可以按行或按列排列。
复杂布局示例
1.grid-container {
2 display: grid;
3 grid-template-columns: 120px 1fr 80px;
4 grid-template-rows: 50px 1fr 50px;
5 gap: 10px;
6 background-color: transparent;
7 border: none;
8 height: 400px;
9}
10.grid-header {
11 grid-column: 1 / 4;
12 background-color: lightblue;
13}
14.grid-sidebar {
15 grid-column: 1 / 2;
16 grid-row: 2 / 3;
17 height: 100%;
18 background-color: lightslategray;
19 color: white;
20}
21.grid-content {
22 grid-column: 2 / 3;
23 grid-row: 2 / 3;
24 background-color: lightskyblue;
25}
26.grid-content p {
27 margin: 0;
28 padding: 0;
29 height: 260px;
30}
31.grid-ads {
32 grid-column: 3 / 4;
33 grid-row: 2 / 3;
34 height: 100%;
35 background-color: lightsteelblue;
36}
37.grid-footer {
38 grid-column: 1 / 4;
39 background-color: lightgray;
40}通过这种方式，网格可以通过简单的代码创建整个网页布局。
- 在这个例子中，有三列（侧边栏、主要内容和广告）和三行（页眉、内容和页脚）。
- 页眉和页脚占据页面的全部宽度，内容在中间，侧边栏和广告在两侧。
网格的优点
网格的优点包括以下几点：。
- 简单的二维布局：通过管理行和列的布局，即使是复杂的布局也可以用更少的代码实现。
- 兼容响应式设计：网格系统使创建适应不同屏幕尺寸的响应式设计变得容易。
gap 属性
1.gap-grid-container {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 30px 10px;
5 background-color: transparent;
6 border: none;
7 height: 200px;
8}
9
10.gap-grid-container div {
11 width: 100px;
12 background-color: lightskyblue;
13}
14
15.gap-flex-container {
16 display: flex;
17 gap: 50px;
18}
19
20.gap-flex-container div {
21 width: 80px;
22 background-color: lightgreen;
23}gap 属性用于网格布局和弹性布局中设置元素之间的间距（缝隙）。使用此属性，您可以轻松地在子元素之间放置空隙。
- 在
gap-grid-container类中，设置了垂直方向30px和水平方向10px的间距，每个元素之间都有间距。由于使用grid-template-columns创建了 3 列的网格，每个元素之间都应用了垂直和水平间距。 在gap-flex-container类中，Flexbox 中的三个项目之间设置了50px的间距。
基本语法
1.container {
2 display: grid; /* or flex */
3 gap: <row-gap> <column-gap>;
4}row-gap指定了行之间的间距。这是网格或弹性布局中的垂直间距。column-gap指定了列之间的间距。这是水平间距。
如果未指定两个值，则一个值会同时应用于 row-gap 和 column-gap。
gap 属性的优点
gap 属性的优点如下：。
- 简单的间距设置：设置子元素之间间距的代码变得更简单，无需为元素之间设置额外的外边距或内边距。
- 灵活的适配性：它可以轻松支持响应式设计，允许灵活的设计调整。
grid-template-areas 属性
1.grid-template-areas-container {
2 display: grid;
3 grid-template-columns: 1fr 2fr; /* 2 columns */
4 grid-template-rows: auto auto; /* 2 rows */
5 grid-template-areas:
6 "header header"
7 "sidebar content"
8 "footer footer"; /* In the 3rd row, the footer spans across */
9 gap: 10px;
10 height: 250px;
11}
12.grid-template-areas-container div {
13 width: 100%;
14 height: 100%;
15}
16.grid-template-areas-header {
17 grid-area: header; /* Placed in the "header" area */
18 background-color: lightblue;
19}
20.grid-template-areas-sidebar {
21 grid-area: sidebar; /* Placed in the "sidebar" area */
22 background-color: lightslategray;
23}
24.grid-template-areas-content {
25 grid-area: content; /* Placed in the "content" area */
26 background-color: lightskyblue;
27}
28.grid-template-areas-footer {
29 grid-area: footer; /* Placed in the "footer" area */
30 background-color: lightsteelblue;
31}grid-template-areas 属性提供了一种为网格容器中的区域命名的方法，并使用这些名称轻松定位网格元素。使用此属性可以实现直观的布局定义。
被放置在 grid-template-areas 属性中指定命名区域的元素，应使用 grid-area 属性分配相同的名称。即使元素跨越多个单元格，它们也会被自动正确定位。
在这个例子中，网格的创建如下：。
- 在第一行，"header" 跨越两个列。
- 在第二行，"Sidebar" 放在左侧，"content" 放在右侧。
- 在第三行，"Footer" 跨越两列。
基本用法
1grid-template-areas:
2 "area1 area2 area3"
3 "area1 area4 area5";在 grid-template-areas 属性中，每一行都指定了区域名称。通过将元素放入指定名称的区域中，可以轻松创建布局。
- 在这个例子中，创建了一个包含 2 行和 3 列的网格，每个单元格被命名为 area1、area2 等。
使用 . 定义空单元格
1grid-template-areas:
2 "header header header"
3 "sidebar . content"
4 "footer footer footer";如果您希望在布局中包含空单元格，可以使用 . (点) 来表示空单元格。
- 如本例所示，通过在 sidebar 和 content 之间指定一个 .，第二列变为空白。
grid-template-areas 属性的优点
grid-template-areas 属性的优点包括以下几点。
- 可视化布局：它允许您直观地表达布局，使设计更易于理解。
- 元素移动方便：您可以通过更改 CSS 中的区域定义轻松调整元素布局，而无需修改 HTML。
注意
在使用 grid-template-areas 属性时，需注意以下几点。
- 每行名称的数量必须与定义的列数相匹配。
- 如果为多个单元格分配相同的名称，这些单元格将会合并。
- 如果在不同的行和列中分配相同的名称，该区域必须形成矩形。
inline-grid
1.inline-grid-container {
2 display: inline-grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 5px;
5 background-color: lightblue;
6}
7.inline-grid-item {
8 background-color: lightskyblue;
9 width: 50px;
10 padding: 0;
11 margin: 0;
12}inline-grid 是 CSS 中 display 属性的值之一。应用此属性会使元素表现为内联级容器，并在内部创建网格格式化上下文。与 display: grid 不同，它在文档流中表现为内联元素。
inline-grid 的使用场景
inline-grid 并不像 grid 那样常用，但它可以在某些特定场景中被有效地使用。
-
内联上下文中的网格：当您希望将网格与文本内容或其他内联元素放在一起时很有用。例如，当按钮、徽章、标签等需要网格结构但又希望内联显示而不破坏文本流时，这会很有帮助。
-
内联元素中的布局控制：即使需要在链接、按钮或 span 等内联元素中实现复杂布局，
inline-grid也可以使用网格布局来管理内部结构，同时避免块级显示。
1<button class="inline-grid">
2 <span>Icon</span>
3 <span>Text</span>
4</button>在这种情况下，按钮以网格形式显示图标和文本，同时在文档流中保持内联。
- 响应式内联组件：
inline-grid可用于需要网格布局的内联内容中的小组件。例如，它适用于内联表单、徽章、产品标签等，您希望使用网格调整布局，同时保持内联显示。
inline-grid 的对齐和尺寸调整
1.inline-grid {
2 display: inline-grid;
3 vertical-align: middle;
4}- 与其他内联元素一样，
inline-grid尊重相对于周围内容的垂直对齐。您可以使用vertical-align属性控制网格的对齐方式。
1.inline-grid {
2 display: inline-grid;
3 width: 200px;
4 height: 100px;
5}- 关于大小，
inline-grid元素只占用其网格内容所需的宽度。如有必要，您可以显式设置宽度、高度以及最小/最大尺寸。
1.inline-grid {
2 display: inline-grid;
3 grid-template-columns: auto 1fr;
4}网格布局本身也可以决定 inline-grid 容器的大小，使用 fr、auto 和百分比等灵活单位时，这种趋势更为明显。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。