学习笔记——网格(grid)布局

谁践踏了优雅 2022-11-04 11:25 392阅读 0赞

> CSS中有着一些功能强大的布局方式，它们大都操作简便，使用少量CSS代码，就可实现较为复杂的页面布局。

--------------------

.wrapper {
        margin: 0 auto;
        width: 80%;
        display: grid;
        grid-template-columns: 100px 100px 100px;
    }
    .item {
        height: 100px;
        background-color: rgba(0,0,255,0.4);
        border: 1px solid #000000;
        box-sizing: border-box;
        line-height: 100px;
        font-size: 30px;
        text-align: center;
        color: white;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][] 图1.1 效果图

## 一.网格容器 ： ##

其中，网格容器为class值为wrapper的div标签。该标签需要display: grid; 开启网格布局。

`fr`装置仅适用于容器中的自由空间

1.grid-template-columns属性：设置网格容器列属性

设置的值可以是百分比或者具体值，给几个值就会设置几列，若设置的值之和超出父容器的宽度就会出现滚动条

上图1.1：上图设置的具体值。

设置百分比会参照网格容器本身的宽度，如果没有宽度，则向上追溯，直到其找到设置宽度的祖先元素，或者body标签的宽度就是网格容器的宽度。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1][]

2.grid-template-rows属性：设置网格容器行属性

设置的值可以是百分比或者具体值，给几个值就会设置几列。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 2][]

3.grid-template-areas属性:  网格区块

grid-template-areas: "a b c"  
                                 "a b c"  
                                 "a b c"; 三行三列

grid-template-areas: "a b"；一行两列

每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元(cell)会生成一列。多个同名的，跨越相邻行或列的单元称为网格区块(grid area)。非矩形的网格区块是无效的。

/* 网格项中设置grid-area属性就可以占位特定的单元格 */
    .wrapper {
        grid-template-areas: "a b c"
                             "a b c"
                             "a b c";
    }
    .item:nth-child(odd) { grid-area: b; }
    .item:nth-child(even) { grid-area: a; }

![20210302144736847.png][]

4.grid-column-gap：指定网格线的大小

可以想象成单元格之间的间距或者宽度，可以设置百分比或者具体值。

5.grid-row-gap：同上

6.grid-gap：上述两个属性的简写，第一个值为grid-column-gap的值，第二个值为grid-row-gap的值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 3][]

7.justify-items:沿着列轴对齐网格项中的内容

**start** : 内容在网格区域中左端对齐

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 4][]

**end** ：内容在网格区域中右端对齐

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 5][]  
**center** ：内容在网格区域居中对齐

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 6][]  
**stretch** ：内容宽度占满整个网格区域（默认值）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 7][]

8.align-items:沿着行轴对齐网格项中的内容

**start** : 内容在网格区域中顶端对齐

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 8][]  
**end** ：内容在网格区域中底部对齐

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 9][]  
**center** ：内容在网格区域居中对齐

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 10][]  
**stretch** ：内容宽度占满整个网格区域（默认值）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 7][]

9.justify-content:沿着列轴对齐网格

**start** \-网格在网格容器中左端对齐

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 11][]  
**end** \- 网格在网格容器中右端对齐

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 12][]  
**center** \- 网格在网格容器中居中对齐

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 13][]  
**stretch** \- 调整网格项的大小，使其宽度填充整个网格容器  
**space-around** \-在网格项之间设置偶数个空格间隙，其最边缘间隙大小为中间空格间隙大小的一半

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 14][]  
**space-between** \- 在网格项之间设置偶数个空格间隙，其最边缘没有间隙

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 15][]  
**space-evenly** \- 在网格项之间设置偶数个空格间隙，其最边缘间隙与其相同

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 16][]

10.align-content:沿着行轴对齐网格

**start** \-网格在网格容器中顶端对齐  
**end** \- 网格在网格容器中底端对齐  
**center** \- 网格在网格容器中居中对齐  
**stretch** \- 调整网格项的大小，使其宽度填充整个网格容器  
**space-around** \-在网格项之间设置偶数个空格间隙，其最边缘间隙大小为中间空格间隙大小的一半  
**space-between** \- 在网格项之间设置偶数个空格间隙，其最边缘没有间隙  
**space-evenly** \- 在网格项之间设置偶数个空格间隙，其最边缘间隙与其相同

11.grid-auto-columns和 grid-auto-rows

指定任何自动生成的网格轨道（也称为隐式网格轨道）的大小。 当显式定位超出定义网格范围的行或列（通过grid-template-rows / grid-template-columns）时，将创建隐式网格轨道。

.wrapper {
        grid-auto-columns: 100px;
        grid-auto-rows: 100px;
    }
    
    .item:nth-child(1) {
        grid-column: 1 / 4;
        grid-row: 1 / 1;
        background-color: #000000;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 17][]

grid-column：1/4 表示从第一列线开始到第四列线结束，共占三列

grid-row: 1/1 表示从第一行线开始到第一行线结束，共占一行

12.grid-auto-flow:

如果您有未明确放置在网格上的网格项，则自动布局算法会启动，以自动放置项。 此属性用来控制自动布局算法的工作原理。

**row** : 告诉自动布局算法依次填充每一行，并根据需要添加新行  
**column** ：告诉自动布局算法依次填充每一列，并根据需要添加新列  
**dense** ： 告诉自动布局算法尝试在网格更早的时候填充接下来出现较小的项目留有的空白

.wrapper {
        grid-template-columns: 100px 100px 100px 100px 100px;
        grid-template-rows: 120px 120px 120px;
        grid-auto-flow: row;
    }
    
    .item:nth-child(2) {
        grid-column: 1;
        grid-row: 1 / 4;
        background-color: #000000;
    }
    .item:nth-child(9) {
        grid-column: 5;
        grid-row: 1 / 4;
        background-color: #000000;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 18][]  
  
13.grid:

在一行声明中设置一下所有属性的简写形式:`grid-template-rows`, `grid-template-column`, `grid-template-areas`, `grid-auto-rows`,`grid-auto-columns`, 以及 `grid-auto-flow`。它将`grid-column-gap` 和 `grid-row-gap`  
属性设置为初始值，即使它们不能由此属性显式去设置。  
**属性值**:  
**none**: 将所有的子属性设置为初始值  
**subgrid**: 将`grid-template-rows`和`grid-template-columns`属性值设置为subgrid其余子属性设置为初始值  
**<grid-template-rows>** / **<grid-template-columns>**: 将`grid-template-rows`和 `grid-template-columns`  
分别设置为指定值，其余子属性设置为初始值  
**<grid-auto-flow>\[<grid-auto-rows> \[ / <grid-auto-columns>\] \]** : `grid-auto-flow`, `grid-auto-rows`和 `grid-auto-columns`属性分别接受相同的值,如果省略了`grid-auto-columns`属性，它将设置为`grid-auto-rows`属性的值。如果两者均被忽略，那么都将被设置为初始值。

## 二.网格项： ##

其中，网格项(网格容器的子节点)为class值为item的div标签。

1.grid-column-start:通过使用特定的网格线确定网格项在网格内的位置

2.grid-column-end:

3.grid-row-start:

4.grid-row-end

**number：具体的网格线**

**span <number>**: 网格项包含指定数量的网格轨道  
**span <name>**: 网格项包含指定名称网格项的网格线之前的网格轨道  
**auto**: 表明自动定位，自动跨度或者默认跨度为一

`grid-column-start`/`grid-row-start`属性表示网格项的网格线的起始位置，`grid-column-end`/`grid-row-end`属性表示网格项的网格线的终止位置。

.item:nth-child(2) {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 2;
        grid-row-end: 4;
        background-color: #000000;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 19][]

grid-column-start: 3;表示该网格项从第三列线开始。grid-column-end: 5; 表示该网格项从第五列线结束。所以宽度为2个单元格

grid-row-start: 2;表示该网格项从第二行线开始。grid-row-end: 4; 表示该网格项从第四行线结束。所以高度为2个单元格

5.grid-column：  
6.grid-row：`grid-column-start`\+`grid-column-end`, 和`grid-row-start`\+`grid-row-end`属性分别的简写形式。

7.grid-area：

**属性值**:  
**<name>** - 你定义的名字  
**<row-start> / <column-start> / <row-end> / <column-end>** - 可以是数字或者命名行

8.justify-self

沿列轴对齐网格项中的内容(相反于align-item属性定义的沿行轴对齐)。此值适用于单一网格项中的内容。  
**属性值**:  
**start**: 内容与网格区域的左端对齐  
**end**: 内容与网格区域的右端对齐  
**center**: 内容处于网格区域的中间位置  
**stretch**: 内容宽度占据整个网格区域空间(默认值)

9.align-self

沿行轴对齐网格项中的内容(相反于justify-item属性定义的沿行轴对齐)。此值适用于单一网格项中的内容。  
**属性值**:  
**start**: 内容与网格区域的左端对齐  
**end**: 内容与网格区域的右端对齐  
**center**: 内容处于网格区域的中间位置  
**stretch**: 内容宽度占据整个网格区域空间(默认值)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221023/1f3fbf612f344c8fbc68414304676c19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1]: /images/20221023/257320781851430bb216510b2b6133d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 2]: /images/20221023/e753dc52e0ea463cbecb9aebd1f4a7e7.png
[20210302144736847.png]: /images/20221023/4b23a5014d2a4c2fbd1fd931d4c57406.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 3]: /images/20221023/57a9ab2694e44357a89c508a66298c9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 4]: /images/20221023/035f89ce6ef54c06954934764389a620.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 5]: /images/20221023/2b2e76b5fe564606b00521e8672b851f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 6]: /images/20221023/b3a39cf01be84dea86aa918f8754f7be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 7]: /images/20221023/413d759946d14aa48fe0465d50520d2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 8]: /images/20221023/237fa8d1a5bf435fb732778a6eebc712.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 9]: /images/20221023/283263cbea93428fa35d10efcbe24869.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 10]: /images/20221023/ab04137606f84acebcd4678f6e3953b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 11]: /images/20221023/ec553e227f5540f3bced2d48f3afb981.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 12]: /images/20221023/fdb5c175ee11452c9fa454cf0beabd92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 13]: /images/20221023/843c1ee7bf1340d7aa4b751b0211c253.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 14]: /images/20221023/b8d85818695e4b06aaeb9a7ec1b3e935.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 15]: /images/20221023/932f7092dea34283bb1abd511a109996.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 16]: /images/20221023/0f7a799664c347c3875cd0aca4fdc19a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 17]: /images/20221023/ac8d7b9946db47658a68cd51c3275e24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 18]: /images/20221023/e22d57fde6014c28beee524223fccbf1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 19]: /images/20221023/ca1a561d1205442ebd3cc5a31b21db55.png