Grid

CSS Grid 布局是一种二维布局系统，允许开发者在行和列上同时控制布局。

它比传统的布局方式（如浮动和定位）更强大和灵活，适用于复杂的网页布局设计。

Grid布局的基本概念

容器（Grid Container）

应用 display: grid 或 display: inline-grid 的元素，其子元素成为 Grid 项目。

项目（Grid Items）

Grid 容器内的直接子元素。

网格线（Grid Lines）

划分网格的线条，分为行网格线和列网格线。

网格轨道（Grid Track）

两条相邻网格线之间的空间，分为行轨道和列轨道。

网格单元格（Grid Cell）

行和列交叉形成的最小单位。

网格区域（Grid Area）

由四条网格线包围的矩形区域，可以包含一个或多个单元格。

Grid容器的属性

• display: grid：设置元素为 Grid 容器。
• grid-template-columns：定义每一列的宽度。
• grid-template-rows：定义每一行的高度。
• grid-template-areas：定义区域的名称。
• grid-template：简写属性，用于同时设置 grid-template-columns、grid-template-rows 和 grid-template-areas。
• grid-gap：定义行和列之间的间距。
• justify-items: 定义项目沿主轴（水平）方向的对齐方式。
• align-items: 定义项目沿交叉轴（垂直）方向的对齐方式。
• justify-content: 定义了网格线沿主轴（水平）方向的对齐方式。
• align-content: 定义了网格线沿交叉轴（垂直）方向的对齐方式。

网格项目的属性

• grid-column-start：定义项目的起始列。
• grid-column-end：定义项目的结束列。
• grid-row-start：定义项目的起始行。
• grid-row-end：定义项目的结束行。
• grid-column：简写属性，用于同时设置 grid-column-start 和 grid-column-end。
• grid-row：简写属性，用于同时设置 grid-row-start 和 grid-row-end。
• grid-area：定义项目所在的区域。
• justify-self: 定义项目沿主轴（水平）方向的对齐方式。
• align-self: 定义项目沿交叉轴（垂直）方向的对齐方式。

Grid 布局的常见用例

等宽列布局

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

响应式布局

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

复杂网格布局

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

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}