CSS 网格元素 (Grid Items)
CSS 网格元素（Grid Items）是指在设置了 display: grid 或 display: inline-grid 的网格容器中的直接子元素。这些元素被称为 网格项（Grid Items），它们会根据容器中定义的网格布局规则自动排布，或者可以通过 CSS 进行手动位置调整。
网格布局让你可以精确地控制这些网格项的位置、大小和对齐方式，从而实现复杂的布局需求。
1️⃣ 网格项的基本布局
在网格容器内的每个子元素都成为一个网格项，自动按照容器中的列和行进行排布。通常，网格项会按照默认的顺序在网格的区域内填充。
示例 HTML：
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
示例 CSS：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 10px; /* 设置行列间距 */
}
.item1, .item2, .item3, .item4, .item5 {
background-color: lightblue;
padding: 10px;
}
- 在这个例子中，网格容器包含了 5 个网格项，网格项按照默认顺序填充网格（即先填充行，再填充列）。
2️⃣ 定位网格项
网格项可以使用 CSS 属性来定位，例如 grid-column 和 grid-row。你可以控制网格项在网格中跨越多少行和列，或者明确指定其位置。
grid-column 与 grid-row 属性
grid-column：控制网格项在水平方向上跨越的列。grid-row：控制网格项在垂直方向上跨越的行。
.item1 {
grid-column: 1 / 2; /* 网格项从第 1 列开始，到第 2 列结束 */
grid-row: 1 / 2; /* 网格项从第 1 行开始，到第 2 行结束 */
}
.item2 {
grid-column: 2 / 4; /* 网格项从第 2 列开始，到第 4 列结束（跨越 2 列） */
grid-row: 1 / 2; /* 网格项从第 1 行开始，到第 2 行结束 */
}
grid-column: 1 / 2表示网格项占据从第 1 列到第 2 列（不包括第 2 列）。grid-row: 1 / 2表示网格项占据从第 1 行到第 2 行（不包括第 2 行）。
简写：grid-area
你还可以使用 grid-area 来简写 grid-row 和 grid-column 的组合。
.item3 {
grid-area: 2 / 1 / 3 / 3; /* 等同于 grid-row: 2 / 3; grid-column: 1 / 3; */
}
grid-area 的值按照 grid-row-start / grid-column-start / grid-row-end / grid-column-end 的顺序排列，定义了网格项的开始和结束位置。
3️⃣ 自动布局（grid-auto-flow）
grid-auto-flow 用于控制网格项的放置方式。它可以指定网格项是否按行或列自动填充。
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-auto-flow: row; /* 默认是按行填充 */
}
grid-auto-flow: row：按行填充网格项。grid-auto-flow: column：按列填充网格项。
4️⃣ 控制网格项的大小
网格项的大小通常会根据网格容器中的行列定义来自动分配。如果你想让某个网格项跨越多个列或行，可以设置 grid-column 或 grid-row 来实现。
例如，让网格项占据 2 行和 2 列的区域：
.item4 {
grid-column: 1 / 3; /* 跨越 2 列 */
grid-row: 1 / 3; /* 跨越 2 行 */
}
5️⃣ 对齐网格项
网格项的对齐方式可以通过 justify-self 和 align-self 来设置。
justify-self：控制网格项在水平方向上的对齐方式。align-self：控制网格项在垂直方向上的对齐方式。
.item1 {
justify-self: center; /* 水平居中 */
align-self: center; /* 垂直居中 */
}
常见的对齐值：
start：在容器的开始处对齐。end：在容器的结束处对齐。center：在容器的中间对齐。stretch（默认）：拉伸至容器的大小。
6️⃣ 嵌套网格
网格项本身也可以作为网格容器，创建嵌套的网格布局。
.item3 {
display: grid; /* 让 item3 成为一个网格容器 */
grid-template-columns: 1fr 1fr; /* 创建两列 */
}
7️⃣ 示例：创建自定义布局
HTML 结构：
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
CSS 布局：
.container {
display: grid;
grid-template-columns: 200px 1fr; /* 左侧 200px 宽，右侧自适应 */
grid-template-rows: auto 1fr auto; /* 头部和底部高度自适应，主体部分占据剩余空间 */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header {
background-color: lightblue;
grid-area: header;
}
.sidebar {
background-color: lightgreen;
grid-area: sidebar;
}
.main {
background-color: lightcoral;
grid-area: main;
}
.footer {
background-color: lightyellow;
grid-area: footer;
}
效果说明：
- 使用
grid-template-areas来定义命名的区域，使布局更加清晰。 - 网格容器的每个子元素（如
.header、.sidebar等）被放置在定义的区域内，布局简洁明了。
8️⃣ 总结
CSS 网格元素（Grid Items）是网格容器中的直接子元素，它们可以通过各种 CSS 属性来精确控制其位置、大小和对齐方式。利用 grid-column、grid-row、grid-area 等属性，可以灵活地安排这些网格项，并且通过 justify-self 和 align-self 等对齐方式进一步细化布局。
发表回复