现在无论做APP还是做网站,宫格的布局也都是必然存在的,那么我们CSS如何实现九宫格布局呢?在css环境下,通过grid布局可以实现九宫格,并且支持设置有边框或者无边框,每个格子是否成正方形?
@include grid(3, 3, true); // 3 x 3, 有边框, 且每个格为正方形
@include grid(2, 5, false, false); // 2 x 5, 无边框
九宫格布局代码
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 8px;
border: 1px solid #fac;
padding: 8px;
}