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

2013-05-22    分类: 网站建设

现在无论做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;

}

网页标题:Grid实现九宫格布局?N宫格怎么实现?
地址分享:https://www.cdcxhl.com/news36/786.html

成都网站建设公司_创新互联,为您提供外贸建站云服务器电子商务网站设计商城网站软件开发

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

商城网站建设