Как выделить один столбец в каждой следующей строке сетки - PullRequest
Новая
       1

Как выделить один столбец в каждой следующей строке сетки

0 голосов
/ 14 ноября 2018

У меня есть несколько делений, и я хочу оставить пространство одного деления с левой стороны в каждом последующем ряду сетки. Например, я хочу, чтобы в первом ряду было 4 блока div, во втором ряду - 3 блока, в третьем ряду - 2 блока и т. Д.

* ** 1003 тысяча два * Пример

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>

1 Ответ

0 голосов
/ 14 ноября 2018

просто с помощью 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...