css3+Grid

CSS Grid 的核心概念有哪些如下 1 网格容器（Grid Container）： - 通过将元素的 display 属性设置为 grid 或 inline-grid，可以将其定义为网格容器。 - 网格容器内的直接子元素会自动成为网格项（Grid Items）。

.container {
display: grid;
}

2 网格项（Grid Items）： - 网格容器内的直接子元素称为网格项。 - 网格项可以放置在网格的任何位置，甚至可以重叠。 3 网格线（Grid Lines）： - 网格线是网格的分界线，可以是水平线或垂直线。 - 网格线用于定义网格的行和列。 4 网格轨道（Grid Track）： - 网格轨道是相邻两条网格线之间的空间，可以是行轨道或列轨道。 - 通过 grid-template-rows 和 grid-template-columns 定义行和列的大小。 5 网格单元格（Grid Cell）： - 网格单元格是网格的最小单位，由相邻的行线和列线围成的区域。 6 网格区域（Grid Area）： - 网格区域是由四条网格线围成的矩形区域，可以包含一个或多个网格单元格。 -– 常用属性有哪些如下 1 定义网格结构 - grid-template-columns：定义列的宽度。 - grid-template-rows：定义行的高度。 - grid-template-areas：通过命名区域定义布局。

.container {
display: grid;
grid-template-columns: 100px 200px auto;
grid-template-rows: 50px 100px;
grid-template-areas:
"header header"
"sidebar main";
}

2 网格间距 - gap（或 row-gap 和 column-gap）：设置行与列之间的间距。

.container {
gap: 10px; /* 行和列的间距 */
row-gap: 15px; /* 仅行间距 */
column-gap: 20px; /* 仅列间距 */
}

3 对齐方式 - justify-items：控制网格项在单元格内的水平对齐方式。 - align-items：控制网格项在单元格内的垂直对齐方式。 - justify-content：控制整个网格在容器内的水平对齐方式。 - align-content：控制整个网格在容器内的垂直对齐方式。

.container {
justify-items: center; /* 水平居中 */
align-items: end; /* 垂直底部对齐 */
}

4 网格项定位 - grid-column：定义网格项跨越的列。 - grid-row：定义网格项跨越的行。 - grid-area：将网格项分配到命名的网格区域。

.item {
grid-column: 1 / 3; /* 从第1列到第3列 */
grid-row: 2 / 4; /* 从第2行到第4行 */
grid-area: header; /* 分配到名为 header 的区域 */
}

5 自动布局 - grid-auto-flow：控制网格项的自动排列方式（默认是行优先 row，也可以设置为列优先 column）。 - grid-auto-columns 和 grid-auto-rows：定义隐式创建的轨道大小。

.container {
grid-auto-flow: column; /* 列优先排列 */
grid-auto-rows: 50px; /* 隐式行的高度 */
}

-– 示例：简单的网格布局

Header

Sidebar

Main Content

Footer

.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 100px 1fr 50px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 10px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

-– 优势在于哪些 1 二维布局：Grid 可以同时控制行和列，适合复杂的布局需求。 2 响应式设计：结合媒体查询，可以轻松实现响应式布局。 3 灵活性：支持动态调整网格大小（如 fr 单位）和自动填充。 4 代码简洁：相比传统的布局方法，Grid 代码更简洁、易维护。 -–