最近很多小伙伴都在问css如何实现n宫格布局?和css实现九宫格布局这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展21九宫格布局、6-1商城小程序首页九宫格布局的初步实现、CSS
最近很多小伙伴都在问css如何实现n宫格布局?和css实现九宫格布局这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展21 九宫格布局、6-1商城小程序首页九宫格布局的初步实现、CSS Grid 网格布局实现自适应9宫格、css 九宫格布局等相关知识，下面开始了哦！
本文目录一览：
css如何实现n宫格布局?（css实现九宫格布局）
常见应用场景
现在的APP界面基本都是大同小异,宫格布局现在基本成了每个APP必然的存在.
带边框,常用在"功能导航"页面
无边框,常用在首页分类
设计目标
在scss环境下,通过mixin实现n宫格,并且可以支持"有无边框"和"每个格是否正方形":
@include grid(3,3,true); // 3 x 3,有边框,且每个格为正方形
@include grid(2,5,false,false); // 2 x 5,无边框
最终效果
"padding百分比"小技巧
先解释一个小技巧,如何实现正方形,保证看一遍就会,结论就是:
padding的值如果是百分比,那么他是相对"父"元素宽度计算的,也就是说如果"父"元素宽度是100px,"子"元素设置padding-top:100%,"子"元素的padding-top实际上等于100px,这样就实现了一个正方形(100 x 100). 为了减少干扰,我们把"子"元素高度设置为0;
设计思路(无关你是scss还是less)
- 为了方便内部元素水平/垂直居中,整体我们用flex布局.
- 使用正方形占位,因为用了padding-top:100%,所以我们就需要再单独用一个div来装内容,我给他起名"item__content".
- 为了让内容的容器div充满方块,我们给他设置样式:position:absolute;top:0;left:0;right:0;bottom:0;;
因此我们的html是这样的:
<!-- a-grid是一个flex容器,方便他的内容做"水平/垂直居中" -->
<div class="a-grid">
<!-- a-grid__item用来占位实现正方形 -->
<div class="a-grid__item">
<!-- item__content才是真正装内容的容器 -->
<div class="item__content">
内容...
</div>
</div>
</div>东莞vi设计https://www.houdianzi.com/dgvi/ 豌豆资源网站大全https://55wd.com
代码(scss)
这里做了3件事:
为了不冗余,我把公共的部分抽离的出来起名".a-grid";
mixin支持4个参数,分别是$row(行数),$column(列数),$hasBorder(是否有边框),$isSquare(是否保证每个块是正方形).
mixin内部通过计算并结合:nth-child实现"整体无外边框"的效果,
.a-grid {
display: flex;
flex-wrap: wrap;
width: 100%;
.a-grid__item {
text-align:center;
position:relative;
>.item__content {
display:flex
flex-flow: column;
align-items: center;
justify-content: center;
}
}
}
@mixin grid($row:3,$column:3,$hasBorder:false,$isSquare:true) {
@extend .a-grid;
.a-grid__item {
flex-basis: 100%/$column;
@if($isSquare) {
padding-bottom: 100%/$column;
height: 0;
}
>.item__content {
@if($isSquare) {
position:absolute;
top:0;left:0;right:0;bottom:0;
}
}
}
@for $index from 1 to (($row - 1) * $column + 1) {
.a-grid__item:nth-child(#{$index}) {
@if($hasBorder) {
border-bottom: 1px solid #eee;
}
}
}
@for $index from 1 to $column {
.a-grid__item:nth-child(#{$column}n + #{$index}) {
@if($hasBorder) {
border-right: 1px solid #eee;
}
}
}
}使用
// 生成一个 3行3列,正方形格子的宫格
.a-grid-3-3 {
@include grid(3,true);
}
// 生成一个 2行5列,无边框宫格,每个格子由内容决定高度
.a-grid-2-5 {
@include grid(2,false);
}提醒大家: 如要做n x m的布局,用@include grid(n,m)后千万别忘了在html中添加 n x m个对应的dom结构.
总结
以上是小编为你收集整理的css如何实现n宫格布局?全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
21 九宫格布局
九宫格布局
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>九宫格布局</title>
6 <style type="text/css">
7 *{
8 padding:0;
9 margin:0;
10 }
11 #wrap{
12 overflow: hidden;
13 }
14 .item{
15 width: 248px;
16 height: 360px;
17 font-size: 13px;
18 }
19 #wrap .item .title{
20 width: 248px;
21 height: 30px;
22 line-height: 30px;
23 overflow: hidden;
24 margin-bottom: 10px;
25 }
26 .imgContainer{
27 width: 248px;
28 display: table-cell;
29 text-align: center;
30 }
31 #wrap .item .price{
32 color:#ff6700;
33 font-size: 18px;
34 font-weight: bold;
35 }
36 </style>
37 </head>
38 <body>
39 <div id="cols">
40 <button>3列</button>
41 <button>4列</button>
42 <button>5列</button>
43 </div>
44 <div id="wrap">
45 <div class="item">
46 <div class="imgContainer">
47 <img src="images/taobao_1.jpg" alt="">
48 </div>
49 <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
50 <p class="price">¥69</p>
51 </div>
52 <div class="item">
53 <div class="imgContainer">
54 <img src="images/taobao_2.jpg" alt="">
55 </div>
56 <p class="title">百搭开春装女胖mm夏季显瘦2019新款大码韩版</p>
57 <p class="price">¥69</p>
58 </div>
59 <div class="item">
60 <div class="imgContainer">
61 <img src="images/taobao_3.jpg" alt="">
62 </div>
63 <p class="title">婚纱2019新款欧美韩式孕妇婚纱高腰韩版</p>
64 <p class="price">¥69</p>
65 </div>
66 <div class="item">
67 <div class="imgContainer">
68 <img src="images/taobao_4.jpg" alt="">
69 </div>
70 <p class="title">点上衣很仙的女装夏2019新款洋气打底衫</p>
71 <p class="price">¥90</p>
72 </div>
73 <div class="item">
74 <div class="imgContainer">
75 <img src="images/taobao_5.jpg" alt="">
76 </div>
77 <p class="title">大码女装胖MM文艺时尚格子圆点显瘦连衣裙</p>
78 <p class="price">¥78</p>
79 </div>
80 <div class="item">
81 <div class="imgContainer">
82 <img src="images/taobao_6.jpg" alt="">
83 </div>
84 <p class="title">2019夏季新款女装韩版修身显瘦V领无袖</p>
85 <p class="price">¥89</p>
86 </div>
87 <div class="item">
88 <div class="imgContainer">
89 <img src="images/taobao_7.jpg" alt="">
90 </div>
91 <p class="title">春季短款小外套女2019春装春秋新款韩</p>
92 <p class="price">¥100</p>
93 </div>
94 <div class="item">
95 <div class="imgContainer">
96 <img src="images/taobao_8.jpg" alt="">
97 </div>
98 <p class="title">大码女装中长款针织衫春装胖mm显瘦</p>
99 <p class="price">¥120</p>
100 </div>
101 <div class="item">
102 <div class="imgContainer">
103 <img src="images/taobao_9.jpg" alt="">
104 </div>
105 <p class="title">春款韩版2019新款女装时尚初春两件套</p>
106 <p class="price">¥107</p>
107 </div>
108 <div class="item">
109 <div class="imgContainer">
110 <img src="images/taobao_10.jpg" alt="">
111 </div>
112 <p class="title">牛仔外套女短款2019春装新款女装韩版</p>
113 <p class="price">¥69</p>
114 </div>
115 <div class="item">
116 <div class="imgContainer">
117 <img src="images/taobao_11.jpg" alt="">
118 </div>
119 <p class="title">2019夏季新款女装裙子纯色流苏a字裙</p>
120 <p class="price">¥56</p>
121 </div>
122 <div class="item">
123 <div class="imgContainer">
124 <img src="images/taobao_12.jpg" alt="">
125 </div>
126 <p class="title">女装休闲短袖韩版宽松2019新款春夏季</p>
127 <p class="price">¥76</p>
128 </div>
129 <div class="item">
130 <div class="imgContainer">
131 <img src="images/taobao_13.jpg" alt="">
132 </div>
133 <p class="title">棉上衣女装秋季新款2019早春休闲时尚</p>
134 <p class="price">¥45</p>
135 </div>
136 </div>
137 </body>
138 <script type="text/javascript">
139 function $(id) {
140 return typeof id === ''string'' ? document.getElementById(id) : null
141 }
142 window.onload = function () {
143 var btns = document.getElementsByTagName(''button'');
144 var items = document.getElementsByClassName(''item'');
145 btns[0].onclick = function () {
146 buju(3)
147 };
148 btns[1].onclick = function () {
149 buju(4)
150 };
151 btns[2].onclick = function () {
152 buju(5)
153 };
154
155 function buju(num) {
156 for (var i = 0; i < items.length; i++) {
157 items[i].style.float = ''left'';
158 items[i].parentNode.style.width = items[i].offsetWidth * num + ''px'';
159 }
160 }
161 }
162 </script>
163 </html>
九宫格布局plus
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>九宫格布局plus</title>
6 <style type="text/css">
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 #wrap{
12 position: relative;
13 }
14 #wrap .item{
15 width: 248px;
16 height: 360px;
17 font-size: 13px;
18 }
19 #wrap .item .title{
20 width: 248px;
21 height: 30px;
22 line-height: 30px;
23 overflow: hidden;
24 margin-bottom: 10px;
25 }
26 .imgContainer{
27 width: 248px;
28 display: table-cell;
29 text-align: center;
30 }
31 #wrap .item .price{
32 color:#ff6700;
33 font-size: 18px;
34 font-weight: bold;
35 }
36
37
38 </style>
39 </head>
40 <body>
41 <div class="cols">
42 <button>3列</button>
43 <button>4列</button>
44 <button>5列</button>
45 </div>
46 <div id="wrap">
47 <div class="item">
48 <div class="imgContainer">
49 <img src="images/taobao_1.jpg" alt="">
50 </div>
51 <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
52 <p class="price">¥69</p>
53 </div>
54 <div class="item">
55 <div class="imgContainer">
56 <img src="images/taobao_2.jpg" alt="">
57 </div>
58 <p class="title">百搭开春装女胖mm夏季显瘦2019新款大码韩版</p>
59 <p class="price">¥69</p>
60 </div>
61 <div class="item">
62 <div class="imgContainer">
63 <img src="images/taobao_3.jpg" alt="">
64 </div>
65 <p class="title">婚纱2019新款欧美韩式孕妇婚纱高腰韩版</p>
66 <p class="price">¥69</p>
67 </div>
68 <div class="item">
69 <div class="imgContainer">
70 <img src="images/taobao_4.jpg" alt="">
71 </div>
72 <p class="title">点上衣很仙的女装夏2019新款洋气打底衫</p>
73 <p class="price">¥90</p>
74 </div>
75 <div class="item">
76 <div class="imgContainer">
77 <img src="images/taobao_5.jpg" alt="">
78 </div>
79 <p class="title">大码女装胖MM文艺时尚格子圆点显瘦连衣裙</p>
80 <p class="price">¥78</p>
81 </div>
82 <div class="item">
83 <div class="imgContainer">
84 <img src="images/taobao_6.jpg" alt="">
85 </div>
86 <p class="title">2019夏季新款女装韩版修身显瘦V领无袖</p>
87 <p class="price">¥89</p>
88 </div>
89 <div class="item">
90 <div class="imgContainer">
91 <img src="images/taobao_7.jpg" alt="">
92 </div>
93 <p class="title">春季短款小外套女2019春装春秋新款韩</p>
94 <p class="price">¥100</p>
95 </div>
96 <div class="item">
97 <div class="imgContainer">
98 <img src="images/taobao_8.jpg" alt="">
99 </div>
100 <p class="title">大码女装中长款针织衫春装胖mm显瘦</p>
101 <p class="price">¥120</p>
102 </div>
103 <div class="item">
104 <div class="imgContainer">
105 <img src="images/taobao_9.jpg" alt="">
106 </div>
107 <p class="title">春款韩版2019新款女装时尚初春两件套</p>
108 <p class="price">¥107</p>
109 </div>
110 <div class="item">
111 <div class="imgContainer">
112 <img src="images/taobao_10.jpg" alt="">
113 </div>
114 <p class="title">牛仔外套女短款2019春装新款女装韩版</p>
115 <p class="price">¥69</p>
116 </div>
117 <div class="item">
118 <div class="imgContainer">
119 <img src="images/taobao_11.jpg" alt="">
120 </div>
121 <p class="title">2019夏季新款女装裙子纯色流苏a字裙</p>
122 <p class="price">¥56</p>
123 </div>
124 <div class="item">
125 <div class="imgContainer">
126 <img src="images/taobao_12.jpg" alt="">
127 </div>
128 <p class="title">女装休闲短袖韩版宽松2019新款春夏季</p>
129 <p class="price">¥76</p>
130 </div>
131 <div class="item">
132 <div class="imgContainer">
133 <img src="images/taobao_13.jpg" alt="">
134 </div>
135 <p class="title">棉上衣女装秋季新款2019早春休闲时尚</p>
136 <p class="price">¥45</p>
137 </div>
138 </div>
139 <script type="text/javascript">
140 // 1.获取标签
141 var btns = document.getElementsByTagName(''button'');
142 var items = document.getElementsByClassName(''item'');
143
144 // 2.监听按钮的点击
145 btns[0].onclick = function(){
146
147 // 3.循环
148 mjj_flex(3);
149 }
150 btns[1].onclick = function(){
151
152 mjj_flex(4)
153
154 }
155 btns[2].onclick = function(){
156
157 mjj_flex(5);
158 }
159
160 function mjj_flex(colsNum){
161 // 第0行第0列 top: row * h left: col* w
162 // 第0行第1列 top: 0 * h left: 1* w
163 // 第0行第2列 top: 0 * h left: 2* w
164 // 第1行第0列 top: 1 * h left: 0 * w
165 // 第1行第1列 top: 1 * h left: 1 * w
166 // 第1行第2列 top: 1 * h left: 2* w
167 // 第2行第0列 top: 2 * h left: 0* w
168 // 第2行第1列 top: 2 * h left: 0* w
169 // 第2行第2列 top: 2 * h left: 0* w
170 for(var i = 0; i < items.length; i++){
171 // 求每个盒子占得行数和列数 10 3行 1列
172 // 11 3行 2列
173 var row = parseInt(i / colsNum);
174 var col = parseInt(i % colsNum);
175 // 设置盒子定位
176 items[i].style.position = ''absolute'';
177 items[i].style.top = (row * items[i].offsetHeight) + ''px'';
178 items[i].style.left = (col * items[i].offsetWidth) + ''px'';
179 }
180
181
182 }
183
184 </script>
185
186 </body>
187 </html>
6-1商城小程序首页九宫格布局的初步实现
CSS Grid 网格布局实现自适应9宫格
引用阮一峰老师话说网格布局（Grid）是最强大的 CSS 布局方案。CSS Grid 网格布局教程
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
上图这样的布局，就是 Grid 布局的拿手好戏。
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
下面我给大家分享一个用grid实现的自适应9宫格，格子大小自定义，间隔不变，以前都是用dom计算，好蠢。
需要根据自己的布局个数，来计算每个格子大小，主要是每个格子的宽高减去相应行和列间隔的大小，以九宫格为列，有3行3列，有行间距2 24px, 有列间距2 24px，每个格子的宽高都要减去48px / 3。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>grid</title>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box
}
body {
height: 100vh;
padding: 20px;
}
.container {
width: 100%;
height: 100%;
display: grid;
/*行间距*/
grid-row-gap: 24px;
/*列间距*/
grid-column-gap: 24px;
/*每3行有2个行间距，所以每个格子的宽高都要减去(24*2) / 3 */
grid-template-columns: repeat(3, calc(33.33% - 16px));
grid-template-rows: repeat(3, calc(33.33% - 16px));
overflow: hidden;
}
.item {
background: #33a8a5;
}
</style>
</html>
css 九宫格布局
原文链接: css 九宫格布局
上一篇: lz-string 面向localstorage的字符串压缩库
下一篇: 音频播放错误的异常 [已解决]
之前做了几个数字相关的小游戏, 用到了类似的布局, 对于css这种东西, 还是用到再查吧
https://juejin.im/post/6886770985060532231#heading-7
不过这篇文章中也有几个不错的点
1, 使用 nth-child 来设置取消边距, 比手写class和写死在css里面好很多
2, 居中使用grid布局, 比flex少写一行代码
3, 颜色讲到了 currentColor 这个确实没怎么了解
不过对于事件的绑定, 这个只能说有时候还是要看情况, 不过确实在父级上绑定一个后, 直接用id来区分点击的是哪一个能减少一些开销, 在这种简单场景下使用完全没问题, 但也不至于就怎么滴了.....
仿照着实现了一下, 基本样例就这样了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrap {
display: flex;
width: 300px;
flex-wrap: wrap;
}
.cell {
font-size: 40px;
display: grid;
place-items: center;
width: 100px;
height: 100px;
box-sizing: border-box;
border: 4px solid black;
background: deepskyblue;
color: white;
margin-left: -4px;
margin-top: -4px;
z-index: 1;
}
.cell:hover {
border: 4px red solid;
z-index: 2;
}
/* 第1、4、7个子元素 */
.cell:nth-child(3n + 1) {
/* 取消左负边距 */
margin-left: 0;
}
/* 前三个子元素 */
.cell:nth-child(-n + 3) {
/* 取消上负边距 */
margin-top: 0;
}
</style>
</head>
<divonclick="showItem(event)">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<body></body>
<script>
function showItem(e){
alert(e.target.innerText)
}
</script>
</html>
我们今天的关于css如何实现n宫格布局?和css实现九宫格布局的分享就到这里，谢谢您的阅读，如果想了解更多关于21 九宫格布局、6-1商城小程序首页九宫格布局的初步实现、CSS Grid 网格布局实现自适应9宫格、css 九宫格布局的相关信息，可以在本站进行搜索。
本文标签：
