The implementation effect is as follows:
First, define the general HTML structure:
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
//公共样式：
<style>
ul {
padding: 0;
}
li {
list-style: none;
text-align: center;
border-radius: 5px;
background: skyblue;
}
</style>
(1) flex implementation
For the nine-square grid layout, the first thing I think of is the flex layout. It is very simple to implement the nine-square grid in the flex layout. You need to set a flex-wrap: wrap; to make the box wrap when it is time to wrap.
Since we set the bottom margin and right margin for each element, the right margin of the last same column (3, 6, 9) and the bottom margin of the last row (7, 8, 9) expand ul, so the type is used here selector to eliminate their influence. The final implementation code is as follows:
ul {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
li {
width: 30%;
height: 30%;
margin-right: 5%;
margin-bottom: 5%;
}
li:nth-of-type(3n){
margin-right: 0;
}
li:nth-of-type(n+7){
margin-bottom: 0;
}
(2)grid implementation
Compared with flex layout, grid layout is easier to implement nine-square grid. You only need to set a few properties:
ul {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 30% 30% 30%;
grid-template-rows: 30% 30% 30%;
grid-gap: 5%;
}
The grid-template-columns attribute is used to set the width of a single element in each row, the grid-template-rows attribute is used to set the height of a single element in each column, and the grid-gap attribute is used to set the spacing between boxes.
(3) float implementation
Here you first need to set a width for the div of the parent element. The width value is: **Box width* 3 + Spacing* 2; **Then set a fixed width and height for each box. In order to make it wrap, you can use float to achieve it. , due to the floating of the child elements, a BFC is formed, so the parent element ul uses overflow:hidden; to eliminate the impact of floating. The final implementation code is as follows:
ul {
width: 100%;
height: 100%;
overflow: hidden;
}
li {
float: left;
width: 30%;
height: 30%;
margin-right: 5%;
margin-bottom: 5%;
}
li:nth-of-type(3n){
margin-right: 0;
}
li:nth-of-type(n+7){
margin-bottom: 0;
}
(4) inline-block implementation
In fact, the function of inline-block is the same as the function of float above. They are both used to wrap elements. The implementation code is as follows:
ul {
width: 100%;
height: 100%;
letter-spacing: -10px;
}
li {
width: 30%;
height: 30%;
display: inline-block;
margin-right: 5%;
margin-bottom: 5%;
}
li:nth-of-type(3n){
margin-right: 0;
}
li:nth-of-type(n+7){
margin-bottom: 0;
}
It should be noted that there may be gaps between elements set to inline-block, and the following situation may occur:
The letter-spacing attribute is used here to eliminate this effect, which can be used to increase or decrease the space between characters (character spacing). After using it, it became normal and had the expected effect. You can also set font-size: 0; for ul to eliminate the character spacing between boxes:
ul {
font-size: 0;
}
(5)table implementation
<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>
The table layout is not too difficult. First, set the parent element to the table layout, then use border-spacing to set the spacing between cells, and finally set the li to the table row and the div to the table cell. The CSS style is as follows:
.table {
width: 100%;
height: 100%;
display: table;
border-spacing: 10px;
}
li {
display: table-row;
}
div {
width: 30%;
height: 30%;
display: table-cell;
text-align: center;
border-radius: 5px;
background: skyblue;
}