浅论Grid实现九宫格布局N宫格怎么实现

现在无论做A

接下来，时至2020年06月29日跟您议Grid实现九宫格布局N宫格怎么实现，揭晓这个困扰众人多年的谜题。

Grid实现九宫格布局N宫格怎么实现：

@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;

}

如果看完上文，想必朋友们应该知道Grid实现九宫格布局N宫格怎么实现了吧，早已在上述文章为大伙儿作了详细介绍，期待前文讲的能对大伙儿有效哦。