html,body{
    height:100%;
    margin:0;
}
 .page{
    position:absolute;
    left:0;
    top:180px;
    right:0;
    bottom:0;
}
 .list{
    float:left;
    height:33.3%;
    width:33.3%;
    position:relative;
}
 .list:before{
    content:'';
    position:absolute;
    left:10px;
    right:10px;
    top:10px;
    bottom:10px;
    border-radius:10px;
    background-color:#cad5eb;
}
 .list:after{
    content:attr(data-index);
    position:absolute;
    height:30px;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    text-align:center;
    font:24px/30px bold 'microsoft yahei';
}

方法五、cloumn多栏布局

原理

cloumn设置三栏布局，这种还是自适应效果的

关键点

1. box依旧做了最严格的祖父，又是宽度限制，又是overflow决绝设卡。

2. ul这次挑了大梁，针对内部的li使用column多栏布局，设置为三栏显示，且每一栏之间

3. 而有了ul的操心，li则美滋滋的做起了公子哥，只管自己的宽高和下边距就好，右边距他爹都给他处理好了。

关键代码

.box{
    width: 640px;
    overflow: hidden;
}
ul {
    /* display: flex; */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    margin-bottom: -20px;
    margin-top: 0;
}
li {
    width: 200px;
    height: 200px;
    /*margin-right: 20px;*/
    margin-bottom: 20px;
}

方法六、grid

原理

用CSS Grid 创建网格布局，是最简单也是最强大的方法。

关键点

1. 九个单元的父元素wrapper设置display为grid类型（注意兼容写法）

默认九个元素就会堆叠排序。

2. 设置每一行中单个元素的宽度： grid-template-columns，每个宽度值100px根据业务需要设置。

给三个设置了宽度就长这样了。

3. 设置每一列中单个元素的高度： grid-template-rows，每个高度值100px根据业务需要设置。

最后出现我们想要的效果：

关键代码

	
		1
	
	
		2
	
	
		3
	
	
		4
	
	
		5
	
	
		6
	
	
		7
	
	
		8
	
	
		9
	

.wrapper{
     display: grid;
     grid-template-columns: 100px 100px 100px;
     grid-template-rows: 100px 100px 100px;
}
 .list{
     background: #eee;
}
 .list:nth-child(odd){
     background: #999;
}

方法七、display：table；

原理

其实他是table的css版本处理方式。原谅我只能想到加结构、模拟tr+td的方式实现了。

好处：也是唯一能用来安慰自己的地方就是，不用table标签少了很多reset样式~

关键点

1. 三行li，每个li里三列div（模拟表格的结构）

2. 父元素ul使用display: table（此元素会作为块级表格来显示（类似 ），表格前后带有换行符。）

3. li元素使用display: table-row（此元素会作为一个表格行显示（类似

）。）

4. li元素内部三个子元素使用display: table-cell（此元素会作为一个表格单元格显示（类似

和

）） 关键代码                      1          2          3                        4          5          6                        7          8          9                 .table {       display: table;     }     .table li {       display: table-row;       background: #beffee;     }     .disTable li:nth-child(odd) {       background: #bec3ff;     }     .table li div {       width: 200px;       line-height: 200px;       display: table-cell;              text-align: center;     }     .table li:nth-child(odd) div:nth-child(even) {       background: #beffee;     }     .table li:nth-child(even) div:nth-child(even) {       background: #bec3ff;     } 方法八、css3选择器nth-child(); 原理 利用css的选择器，选择对应个数的li，设置特殊样式。 不足（缺点） li必须要设置固定的宽高，且ul也要设置固定宽高，以强制似的li“归位”。 关键点 li.nth-child(3n):控制第3以及3的倍数的li的右边距不存在。 关键代码     1     2     3     4     5     6     7     8     9      ul,li{       list-style: none;       overflow: hidden;     }     ul{       width: 620px;     }     li.list{       float: left;       width: 200px;       height: 200px;       margin-right: 10px;       margin-bottom: 10px;       background: #eee;     }     li:nth-child(3n){       margin-right: 0;     } 以上是“如何使用CSS实现九宫格布局”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！ 本文名称：如何使用CSS实现九宫格布局 URL网址：http://kswjz.com/article/jgoche.html 扫二维码与项目经理沟通 我们在微信上24小时期待你的声音 解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流 其他资讯 ios14修改app图标和名字怎么更换手机软件图标？-创新互联 主从复制、读写分离、分库分表-创新互联 Linux实现远程控制机器的方法-创新互联 Java怎么创建TCP协议-创新互联 igfxemmodule指的是什么程序-创新互联 行业动态 企业网站建设的重要性！ 现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。... 服务项目 网站建设 查看详情 移动端/APP 查看详情 微信/小程序 查看详情 技术支持 查看详情 其它服务 查看详情 更多服务项目 用我们的专业和诚信赢得您的信赖，从PC到移动互联网均有您想要的服务！ 获取更多 联系吧 在百度地图上找到我们 电话：13518219792 如遇占线或暂未接听请拨：136xxx98888 业务咨询 技术咨询 售后服务 网站设计 广安网站设计 网站设计制作 重庆网站设计 网站设计 网站制作 成都营销网站制作 成都网站制作 成都商城网站制作 成都网站制作 联系我们 电话：13518219792 邮箱：631063699@qq.com 地址：成都青羊区锦天国际1002号 网址：www.kswjz.com 网站建设 网站建设 网站建设方案 成都响应式网站建设公司 成都网站建设公司 微信二维码 友情链接 成都网站制作 内江网站建设 网络推广 成都网站维护公司 led无边发光字 专业网站建设 青羊区雕琢时光 四川黔盛装饰 成都网站推广 益鑫餐饮 Copyright © 2002-2023 www.kswjz.com 快上网建站品牌 QQ：244261566 版权所有 备案号：蜀ICP备19037934号 在线咨询 13518219792 微信二维码 移动版官网