css3网格布局 - 技术栈

一、基本概念

网格容器（Grid Container）

是应用了display: grid或display: inline - grid属性的元素。它是网格布局的最外层元素，所有的网格项目（Grid Items）都包含在这个容器内。例如：

html 复制代码

.container {
    display: grid;
}

display: grid会创建一个块级网格容器，而display: inline - grid则创建一个内联级网格容器
网格项目（Grid Item）

是网格容器的子元素。这些子元素会按照网格布局的规则在容器内排列。例如，在一个包含多个
子元素的网格容器中，这些
就是网格项目。
网格线（Grid Lines）
构成网格结构的分界线。它们可以是水平的（行网格线）或垂直的（列网格线）。通过指定网格项目在网格线之间的位置来布局。例如，一个 2x2 的网格有 3 条列网格线和 3 条行网格线。
网格轨道（Grid Tracks）
是两个相邻网格线之间的空间。可以是行轨道（Row Tracks）或者列轨道（Column Tracks）。轨道的大小可以是固定的（如100px）、百分比（如50%）或者自适应（auto）等多种方式定义。

二、定义网格结构

定义列和行
grid-template-columns属性

用于定义网格的列轨道。可以使用多种单位和方式来定义列的宽度。

例如，创建一个三列的网格，每列宽度为100px：

html 复制代码

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}

还可以使用fr（fractional unit）单位来创建弹性列。例如，创建一个两列的网格，第一列占 1 份空间，第二列占 2 份空间：

html 复制代码

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

grid-template-rows属性

用于定义网格的行轨道。和grid-template-columns类似。

例如，创建一个两行的网格，第一行高度为50px，第二行高度自适应：

html 复制代码

.container {
    display: grid;
    grid-template-rows: 50px auto;
}

网格间距（Gap）

grid-column-gap和grid-row-gap属性（已废弃，建议使用gap属性）

grid-column-gap用于设置列与列之间的间距，grid-row-gap用于设置行与行之间的间距。

例如，设置列间距为10px，行间距为20px：

html 复制代码

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
}

gap属性

是grid-column-gap和grid-row-gap的简写形式。可以接收一个或两个值。

一个值时，表示行和列的间距相同。例如，设置间距为15px：

html 复制代码

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px;
    gap: 15px;
}

两个值时，第一个值表示行间距，第二个值表示列间距。例如，设置行间距为10px，列间距为20px：

html 复制代码

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px;
    gap: 10px 20px;
}

三、定位网格项目

使用网格线编号定位

grid-row-start、grid-row-end、grid-column-start和grid-column-end属性

这些属性用于指定网格项目的起始和结束网格线位置。

例如，将一个网格项目放置在从第一行网格线开始，到第三行网格线结束，从第二列网格线开始，到第四列网格线结束的位置：

html 复制代码

.item {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 4;
}

使用grid-area属性定位

这是一个简写属性，它可以同时设置grid-row-start、grid-row-end、grid-column-start和grid-column-end。

例如，和上面的定位效果相同的grid-area写法：

html 复制代码

   .item {
        grid-area: 1 / 2 / 3 / 4;
    }

也可以为网格区域命名，然后通过名称来定位网格项目。首先在网格容器中定义区域名称：

html 复制代码

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

然后将网格项目放置到对应的区域：

html 复制代码

.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.content {
    grid-area: content;
}

四、网格项目的对齐方式

容器内项目的对齐（justify-items和align-items）
justify-items属性

用于设置网格项目在列方向（水平方向）上的对齐方式。它可以取值为start（默认值，靠列的起始边对齐）、end（靠列的结束边对齐）、center（在列中间对齐）、stretch（拉伸以填满列宽度）。

例如，将所有网格项目在列方向上居中对齐：

html 复制代码

.container {
    display: grid;
    justify-items: center;
}

align-items属性

用于设置网格项目在行方向（垂直方向）上的对齐方式。取值和justify-items类似，有start、end、center、stretch。

例如，将所有网格项目在行方向上底部对齐：

html 复制代码

.container {
    display: grid;
    align-items: end;
}

整个容器的对齐（justify-content和align-content）
justify-content属性

当网格容器的宽度大于所有列轨道宽度之和时，用于设置整个网格在容器的水平方向上的对齐方式。取值有start（默认值，靠容器的起始边对齐）、end（靠容器的结束边对齐）、center（在容器中间对齐）、space - between（在列轨道之间均匀分布，两端对齐）、space - around（在列轨道周围均匀分布）。

例如，将整个网格在容器水平方向上均匀分布，两端对齐：

html 复制代码

.container {
    display: grid;
    justify-content: space - between;
}

align-content属性

当网格容器的高度大于所有行轨道高度之和时，用于设置整个网格在容器的垂直方向上的对齐方式。取值和justify-content类似。

例如，将整个网格在容器垂直方向上居中对齐：

html 复制代码

.container {
    display: grid;
    align-content: center;
}

五、响应式网格布局

CSS 网格布局在响应式设计中非常强大。可以通过媒体查询来改变网格的结构和布局。

例如，在小屏幕设备上，将一个三列的网格变成一列：

html 复制代码

@media (max - width: 600px) {
   .container {
        grid-template-columns: 1fr;
    }
}