如何在网格显示的每个下一行中给出一个列空间
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在网格显示的每个下一行中给出一个列空间相关的知识，希望对你有一定的参考价值。
我有几个div，我想在网格的每个后续行中留下一个div的空格。例如，我希望第一行有4个div框，第二行有3个div框，第三行有2个框，依此类推。
例
CSS
.wrapper {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 1px;
grid-auto-flow: row;
grid-auto-rows: 100px 100px;
}
* {box-sizing: border-box;}
.wrapper > div {
border-radius: 5px;
background-color: #DCE0E7;
padding: 1em;
color: #d9480f;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>nine</div>
<div>ten</div>
</div>
答案
只使用css而不使用javascript或scss，使用nth-child()可以帮助创建这样的东西。
/* Start from left*/
.wrapper,.wrapper *{
box-sizing: border-box;
}
.wrapper > div{
width: 20%;
float: left;
height: 40px;
border:1px solid #aaa;
}
.wrapper > div:nth-child(6){
margin-left: 20%;
}
.wrapper > div:nth-child(10){
margin-left: 40%;
}
.wrapper > div:nth-child(13){
margin-left: 60%;
}
.wrapper > div:nth-child(15){
margin-left: 80%;
}
/* Start from right*/
/*.wrapper,.wrapper *{
box-sizing: border-box;
}
.wrapper > div{
width: 20%;
float: right;
height: 40px;
border:1px solid #aaa;
}
.wrapper > div:nth-child(9){
margin-left: 20%;
}
.wrapper > div:nth-child(12){
margin-left: 40%;
}
.wrapper > div:nth-child(14){
margin-left: 60%;
}
.wrapper > div:nth-child(15){
margin-left: 80%;
}*/<!doctype html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<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>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
</body>
</html>以上是关于如何在网格显示的每个下一行中给出一个列空间的主要内容，如果未能解决你的问题，请参考以下文章