How to give one column space in every next row of grid display

user_7956962 0
Viewed 46

I have a few divs and I want to leave the space of one div on the left side in every subsequent row of the grid. For instance, I want to have 4 div boxes in the first row, 3 div boxes in the second row, 2 boxes in the third row and so on.

Example

enter image description here

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>
css html
1 Answers

just using css without using javascript or scss, using nth-child() can help to create something like this.

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

user_106077940
Related