网格布局中 justify-items 和 align-litems

作者：你好赵伟 | 2024-03-23 13:10:19

踩

justify-items

justify-items 和 align-litems 是从整体上调整 网格项(grid items)中的内容 在 网格区域（grid area） 中的位置的。
也可以单独调整某个网格项(grid items)中的内容，在这个网格项上使用 justify-self 和 align-self 属性。

justify-items

网格容器（ grid container） 的属性，设置网格项(grid items)中的内容（the content within grid items）沿着行轴线（水平方向）上的对齐方式，适用于容器内的所有网格项。

如果要单独调整某个网格项中的内容沿着行轴线（水平方向）上的对齐方式，则可以在 这个网格项 上使用 justify-self 属性。

值：

start：将网格项中的内容对齐到其网格区域（grid area）行轴线的起始边缘（Justifies content of grid items with the starting edge of the grid area along the row-axis）
end：将网格项中的内容对齐到其网格区域（grid area）行轴线的结束边缘（Justifies content of grid items with the ending edge of the grid area along the row-axis）
center：将网格项中的内容对齐到其网格区域（grid area）行轴线的中心位置（Justifies content of grid items in the center of the grid area along the row-axis）
stretch：默认值，将网格项中的内容撑满其网格区域（grid area）（This is the default value. Fills up the width of the grid area.）

align-items

网格容器（ grid container） 的属性，设置网格项(grid items)中的内容（the content within grid items）沿着列轴线（垂直方向）上的对齐方式，适用于容器内的所有网格项。

如果要单独调整某个网格项中的内容沿着列轴线（垂直方向）上的对齐方式，则可以在 这个网格项 上使用 align-self 属性。

值：

start：将网格项中的内容对齐到其网格区域（grid area）列轴线的起始边缘（Aligns content of grid items with the starting edge of the grid area along the row-axis）
end：将网格项中的内容对齐到其网格区域（grid area）列轴线的结束边缘（Aligns content of grid items with the ending edge of the grid area along the row-axis）
center：将网格项中的内容对齐到其网格区域（grid area）列轴线的中心位置（Aligns content of grid items in the center of the grid area along the row-axis）
stretch：默认值，将网格项中的内容撑满其网格区域（grid area）（This is the default value. Fills up the width of the grid area.）

举个栗子：

html主要代码：

    <div class="wrapper">
        <div class="box a">
            <p>This is box A. </p>
        </div>

        <div class="box b">
            <p>This is box B.</p>
        </div>

        <div class="box c">
            <p>This is box C.</p>
        </div>

        <div class="box d">
            <p>This is box D.</p>
        </div>
        
        <div class="box e">
            <p>Each of the boxes on the left has a grid area of 2 columns and 2 rows </p>
            <p>The justify-items property is used to justify the content inside each grid-area.</p>
            <p>Other values of justify-items are:</p>
            <ul>
                <li>stretch</li>
                <li>start</li>
                <li>end</li>
                <li>center</li>
            </ul>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

css主要代码：

        .wrapper {
            display: grid;
            /* 网格项中内容的对齐方式 */
            justify-items: start;
            grid-gap: 10px;
            grid-template-columns: repeat(6, 150px);
            grid-template-rows: repeat(4, 150px);
        }

        .a {
            grid-column: 1 / 3;
            grid-row: 1 / 3;
            background: rgba(232, 140, 217, 0.5);
        }

        .b {
            grid-column: 3 / 5;
            grid-row: 1 / 3;
            background:rgba(65, 193, 12, 0.5);
        }

        .c {
            grid-column: 1 / 3;
            grid-row: 3 / 5;
            background:rgba(151, 183, 241, 0.5);
        }

        .d {
            grid-column: 3 / 5;
            grid-row: 3 /5;
            background:rgba(232, 187, 140, 0.5);
        }

        .e {
            grid-column: 5 / 7;
            grid-row: 1 / 5;
            /* 网格项也可以用 align-self 属性单独调整自己列轴线（垂直方向）上的对齐方式 */
            align-self: start;
            background:#5ecfda3d;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

最终效果：
在这里插入图片描述
完整代码也贴出来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>grid demo</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 20px;
            color: #000;
        }

        ul{
            margin-left: 40px;
        }

        .wrapper {
            background: no-repeat url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/grid.png);
        }

        .box {
            border: 1px solid #444;
        }

        .wrapper {
            display: grid;
            /* 网格项中内容的对齐方式 */
            justify-items: start;
            grid-gap: 10px;
            grid-template-columns: repeat(6, 150px);
            grid-template-rows: repeat(4, 150px);
        }

        .a {
            grid-column: 1 / 3;
            grid-row: 1 / 3;
            background: rgba(232, 140, 217, 0.5);
        }

        .b {
            grid-column: 3 / 5;
            grid-row: 1 / 3;
            background:rgba(65, 193, 12, 0.5);
        }

        .c {
            grid-column: 1 / 3;
            grid-row: 3 / 5;
            background:rgba(151, 183, 241, 0.5);
        }

        .d {
            grid-column: 3 / 5;
            grid-row: 3 /5;
            background:rgba(232, 187, 140, 0.5);
        }

        .e {
            grid-column: 5 / 7;
            grid-row: 1 / 5;
            /* 网格项也可以用 align-self 属性单独调整自己列轴线（垂直方向）上的对齐方式 */
            align-self: start;
            background:#5ecfda3d;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box a">
            <p>This is box A. </p>
        </div>

        <div class="box b">
            <p>This is box B.</p>
        </div>

        <div class="box c">
            <p>This is box C.</p>
        </div>

        <div class="box d">
            <p>This is box D.</p>
        </div>
        
        <div class="box e">
            <p>Each of the boxes on the left has a grid area of 2 columns and 2 rows </p>
            <p>The justify-items property is used to justify the content inside each grid-area.</p>
            <p>Other values of justify-items are:</p>
            <ul>
                <li>stretch</li>
                <li>start</li>
                <li>end</li>
                <li>center</li>
            </ul>
        </div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/295351