如何在网格显示的每个下一行中给出一个列空间

Question

我有几个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;
}

HTML

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

Answer 1

只使用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>

如何在网格显示的每个下一行中给出一个列空间

问题描述投票：2回答：1

1个回答

最新问题

如何在网格显示的每个下一行中给出一个列空间

问题描述 投票：2回答：1

1个回答

最新问题

问题描述投票：2回答：1