css 九宫格页面布局 |css 加载 优化

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background-color: #eee;
padding: 20px;
}

上述代码中，使用了网格布局（display: grid），将页面内容分成了三行三列（grid-template-columns 和 grid-template-rows），并且每个单元格之间间隙为10像素（gap）。接下来，只需要将页面内容放进这些九宫格单元格中即可，代码如下：

<div class="grid-container"><div class="grid-item"><h1>1</h1></div><div class="grid-item"><h1>2</h1></div><div class="grid-item"><h1>3</h1></div><div class="grid-item"><h1>4</h1></div><div class="grid-item"><h1>5</h1></div><div class="grid-item"><h1>6</h1></div><div class="grid-item"><h1>7</h1></div><div class="grid-item"><h1>8</h1></div><div class="grid-item"><h1>9</h1></div></div>

上述代码中，每个单元格都是一个 <div>元素，并且添加了一个类名（grid-item），这样就可以把所有单元格的样式都控制在同一个CSS样式表中。每个单元格中可以放置需要展示的内容，例如标题、文本、图片等等。这样一来，一个CSS九宫格页面布局就完成了。