Quoting from teacher Ruan Yifeng, Grid is the most powerful CSS layout solution. CSS Grid grid layout tutorial
It divides web pages into grids, and can combine different grids at will to make a variety of layouts. Previously, effects that could only be achieved through a complex CSS framework are now built-in in the browser.
The layout shown in the figure above is the master of Grid layout.
The Grid layout has a certain similarity to the Flex layout, and both can specify the position of multiple items inside the container. However, they also have important differences.
Flex layout is an axis layout. You can only specify the position of the "item" for the axis, which can be regarded as a one-dimensional layout. The Grid layout divides the container into "rows" and "columns", generates cells, and then specifies the cell where the "item is located", which can be regarded as a two-dimensional layout. The Grid layout is far more powerful than the Flex layout.
Let me share with you an adaptive 9-square grid implemented with grid, the grid size is customized, and the interval is unchanged. Before, I used dom to calculate, so stupid.
You need to calculate the size of each grid according to the number of your layout, mainly the width and height of each grid minus the size of the corresponding row and column spacing. With the grid as the column, there are 3 rows and 3 columns, and the row spacing is 2 161b2c2c3ccc6c 24px , There is a column spacing of 2 24px, and the width and height of each grid must be subtracted by 48px / 3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>grid</title>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box
}
body {
height: 100vh;
padding: 20px;
}
.container {
width: 100%;
height: 100%;
display: grid;
/*行间距*/
grid-row-gap: 24px;
/*列间距*/
grid-column-gap: 24px;
/*每3行有2个行间距，所以每个格子的宽高都要减去(24*2) / 3 */
grid-template-columns: repeat(3, calc(33.33% - 16px));
grid-template-rows: repeat(3, calc(33.33% - 16px));
overflow: hidden;
}
.item {
background: #33a8a5;
}
</style>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。