[分享]css写一个九宫格

在网页设计中，九宫格是一个常用的布局方式，通过CSS样式可以轻松地实现一个简单的九宫格布局。

.container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
}
.box{
    background-color: #f2f2f2;
    text-align: center;
    font-size: 20px;
    padding: 20px;
}

以上是实现一个基础九宫格的CSS代码示例。首先定义一个类名为.container的样式类，将其设置为网格布局，列数为3，行数也为3，并设置了元素之间的间隔为20px。接着，定义一个类名为.box的样式类，为每个网格框添加默认的背景色、居中显示、字体大小和内边距。

使用以上CSS代码即可实现一个简单的九宫格布局。同时，可以通过更改样式类中的属性值来实现不同的效果，例如设置不同的背景图像、颜色、字体大小等。