CSS九宫格
一、flex
使用flex-wrap
,每个item
宽度高度相等
<ul class="container">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
</ul>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.container {
display: flex;
flex-wrap: wrap;
width: 300px;
/* height: 200px; */
}
.item {
width: 30%;
height: 90px;
text-align: center;
background-color: aquamarine;
margin: 0 5% 5% 0;
}
.container :nth-child(3n) {
margin-right: 0;
margin-bottom: 0;
}
二、Grid布局
<div class="wrapper">
<div class="list list1">
1
</div>
<div class="list">
2
</div>
<div class="list">
3
</div>
<div class="list">
4
</div>
<div class="list">
5
</div>
<div class="list">
6
</div>
<div class="list">
7
</div>
<div class="list">
8
</div>
<div class="list">
9
</div>
</div>
.wrapper {
display: grid;
width: 300px;
height: 300px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 20px 20px;
}
.list {
background: #eee;
}
.list:nth-child(odd) {
background: #999;
}
三、table布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table {
display: table;
border-spacing: 5px;
}
.table li {
display: table-row;
background: #beffee;
}
.disTable li:nth-child(odd) {
background: #bec3ff;
}
.table li div {
width: 200px;
line-height: 200px;
display: table-cell;
text-align: center;
}
.table li:nth-child(odd) div:nth-child(even) {
background: #beffee;
}
.table li:nth-child(even) div:nth-child(even) {
background: #bec3ff;
}
</style>
</head>
<body>
<ul class="table">
<li>
<div>1</div>
<div>2</div>
<div>3</div>
</li>
<li>
<div>4</div>
<div>5</div>
<div>6</div>
</li>
<li>
<div>7</div>
<div>8</div>
<div>9</div>
</li>
</ul>
</body>
</html>