Flex实现
原理： 使用flex弹性布局和flex-wrap来设置
//html代码
九宫格1九宫格2九宫格3九宫格4九宫格5九宫格6九宫格7九宫格8九宫格9
// css代码
.box {
position: relative;
width: 100%;
height: 600px;
}
.box-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.box-inner > li {
overflow: hidden;
flex-grow: 1;
background-color: darkorange;
text-align: center;
color: #ffffff;
width: 33%;
height: 200px;
line-height: 200px;
margin: 1px;
text-align: center;
}
复制代码
效果图
Grid实现
原理：使用grid创建网格布局，划分为3x3的等分布局
//html代码
九宫格1九宫格2九宫格3九宫格4九宫格5九宫格6九宫格7九宫格8九宫格9
//css代码
.box {
display: grid;
height: 600px;
width: 100%;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.box > div {
width: 98%;
margin: 1%;
background-color: deeppink;
text-align: center;
line-height: 200px;
}
.box > div:nth-child(even) {
background-color: black;
color: #fff;
}
复制代码
效果图
Float实现
原理：利用float布局和31%的百分比设置宽和高
//html代码
九宫格1九宫格2九宫格3九宫格4九宫格5九宫格6九宫格7九宫格8九宫格9
//css代码
.box {
position: relative;
width: 100%;
height: 600px;
}
.box-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box-inner > li {
position: relative;
float: left;
width: 31%;
height: 31%;
margin: 1%;
list-style-type: none;
background-color: springgreen;
text-align: center;
line-height: 200px;
}
.box-inner > li:nth-child(odd) {
background-color: silver;
}
复制代码
效果图
Table实现
原理1：使用原生table表格实现九宫格
缺点：单元之间的间隔使用border-spacing实现，不支持百分比，设置后为添加单元四周的间隔
//html代码
//css代码
.box {
position: relative;
width: 100%;
height: 600px;
}
.box-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 10px;
border-spacing: 0.57em;
font-size: 20px;
empty-cells: hide;
table-layout: fixed;
}
.box-inner > tbody > tr > td {
text-align: center;
background-color: burlywood;
overflow: hidden;
}
复制代码
效果图
原理2：模仿table表格，模拟tr+td的方式实现,减少重置table某些样式
缺点：对margin值无反应，响应padding属性，内容溢出时会自动撑开父元素
包含三个li,li包含三个div
ul使用display:table,模拟
li使用display: table-row, 模拟
li包含的三个div使用display: table-cell,模拟
和
//html代码
九宫格1九宫格2九宫格3九宫格4九宫格5九宫格6九宫格7九宫格8九宫格9
//csss代码
.box {
position: relative;
width: 100%;
height: 600px;
}
.box-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: table;
margin: 10px;
}
.box-inner li {
display: table-row;
}
.box-inner li div {
display: table-cell;
width: 30%;
background-color: crimson;
border: 1px solid black;
line-height: 200px;
text-align: center;
font-size: 20px;
}
.box-inner li div:nth-child(even) {
background-color: seashell;
}
复制代码
效果图
