Grid布局

作者：小蓝xlanll | 2024-03-19 15:03:00
踩
Grid布局
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex布局和Grid布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      /* flex布局开始 */
      .head-title {
        text-align: center;
        color: #555;
        font-size: 26px;
        padding: 30px 0;
      }
      .layout {
        width: 1400px;
        min-height: 500px;
        background: #fff;
        border-radius: 10px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        padding: 30px;
        margin-bottom: 40px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .layout .box {
        width: 300px;
        height: 200px;
        background: #7c9fb0;
        border-radius: 8px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin-bottom: 40px;
      }
      /* flex布局结束 */

      /* grid布局开始 */
      .grid {
        /* grid布局，两端对齐，最后一行左对齐 */
        display: grid;
        /* 设置一行分成几列，每列占1份空间, 平均分布 */
        /* grid-template-columns: 1fr 1fr 1fr 1fr; */
        /* grid-template-columns: repeat(重复几次, 盒子宽度); */
        grid-template-columns: repeat(4, 1fr);
        /* 响应式布局-宽度不小于260px,小于260px就开始重新分配列 */
        /* grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); */
        /* 设置每个盒子之间的间隙 */
        gap: 20px;
        /* width: 80%;  如过需要做响应式, 那么宽度不要固定写死, 使用百分比单位 */
        width: 1400px;
        min-height: 500px;
        background: #fff;
        border-radius: 10px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        padding: 30px;
      }

      .grid .box {
        /* 子元素不用给宽度 */
        /* width: 300px; */
        height: 200px;
        background: #ffcf7f;
        border-radius: 8px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
      /* grid布局结束 */

      /* grid布局开始 */
      .grid-2 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        width: 1400px;
        min-height: 500px;
        background: #fff;
        border-radius: 10px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        padding: 30px;
      }

      .grid-2 .box {
        /* 子元素不用给宽度、高度 */
        /* width: 300px; */
        /* height: 200px; */
        background: #f6a4a4;
        border-radius: 8px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }

      .grid-2 .box1 {
        /* grid-row: (从第几列开始/跨几行) */
        /* grid-column: (从第几列开始/跨几列) */
        /* 跨3行,跨两列 */
        /* grid-row: 1/4;
        grid-column: 1/3; */
        /* 上述写法等价于 */
        grid-row: span 3; /* 跨3行 */
        grid-column: span 2; /* 跨2列 */
      }

      /* 修改除box1以外其他兄弟盒子的高度 */
      .grid-2 .box1 ~ .box {
        height: 120px;
      }
      /* grid布局结束 */
    </style>
  </head>
  <body>
    <div class="head-title">常用的flex布局-缺点:最后一行左侧不能对齐</div>
    <div class="layout">
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
    </div>
    <hr />
    <div class="head-title">网格布局</div>
    <div class="grid">
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
      <div class="box">box方块</div>
    </div>
    <hr />
    <div class="head-title">网格布局2</div>
    <div class="grid-2">
      <div class="box box1">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</div>
      <div class="box box2">box方块</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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
在这里插入图片描述
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/268000