【CSS】九宫格布局

CSS Grid布局（保举）

实现代码：

1. <!doctype html>
2. <html lang="en">
3.   <head>
4.     <meta charset="UTF-8" />
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6.     <title>Document</title>
7.     <style>
8.       .container {
9.         display: grid;
10.         /*
11.         grid-template-columns 设置列宽
12.         repeat(3, 1fr) 表示三列等宽 1fr 表示一列的宽度
13.         */
14.         grid-template-columns: repeat(3, 1fr);
15.         gap: 10px; /* 行列间距统一 */
16.         .item {
17.           background-color: #f0f0f0;
18.           padding: 10px;
19.           border-radius: 5px;
20.         }
21.       }
22.     </style>
23.   </head>
24.   <body>
25.     <div class="container">
26.       <div class="item">1</div>
27.       <div class="item">2</div>
28.       <div class="item">3</div>
29.       <div class="item">4</div>
30.       <div class="item">5</div>
31.       <div class="item">6</div>
32.       <div class="item">7</div>
33.       <div class="item">8</div>
34.       <div class="item">9</div>
35.     </div>
36.   </body>
37. </html>

复制代码

Flexbox布局（兼容性优先）

实现代码：

1.       .container {
2.         display: flex;
3.         flex-wrap: wrap;
4.       }
5.       .item {
6.         flex: 0 0 calc(33.33% - 20px);
7.         margin: 10px;
8.         background-color: #f0f0f0;
9.       }

复制代码

Float浮动布局（传统方案）

需手动计算容器宽度并扫除浮动，适用于老旧浏览器环境。
实现代码：

1. .container {
2.   width: 306px; / (100px3) + (边距6px2) /
3.   overflow: hidden; / 清除浮动 /
4. .item {
6.   float: left;
7.   width: 94px; / 100px - 边距3px2 */
8.   margin: 3px;
9. }

复制代码

Inline-block布局（特殊场景）

需处置惩罚元素间的默认空白间隙，适合必要行内特性的复杂组合。
实现代码：

1. .container {
2.   font-size: 0; / 消除字符间隙 /
3.   letter-spacing: -5px;
4. .item {
6.   display: inline-block;
7.   width: 33.33%;
8.   font-size: 16px; / 重置字体 /
9. }

复制代码