css实现页面九宫格布局 |实时更新css

.box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
width: 400px;
height: 400px;
}
.box div {
width: 30%;
height: 30%;
background-color: #ccc;
}

以上代码中，大家首先在外层容器中设置了display:flex以及flex-wrap、justify-content、align-content等属性来实现九宫格布局。其中flex-wrap设置为wrap，使得如果原先在一行中放不下的元素可以自动换行。justify-content和align-content分别设置为space-between使得在行和列方向上元素之间的空隙均等。

而对于内部的元素，大家将其固定宽高比设置为30%，以此来让它们在外容器中自适应排列。同时，也可以通过设置内部元素的背景颜色为#ccc来制作出九宫格的效果。