Как поместить ячейку сетки в форму для проверки, где каждая белая ячейка пуста - PullRequest
Новая
       9

Как поместить ячейку сетки в форму для проверки, где каждая белая ячейка пуста

0 голосов
/ 12 апреля 2020

Ссылка на изображение Как создать css макет сетки, как указано в ссылке на изображение. Я хочу добавить пустое пространство в пустую область и элемент ячейки в синей области.

это то, чего я могу достичь. 

<html>
<head>
<style>
    .grid-contaienr {
        display: grid;
        grid-template-columns: 120px 100px;
        grid-auto-rows: ;
    }

    .cell {
        background-color: aqua;
        box-shadow: 0px 0px 1px 0px rgb(71, 71, 71) inset;
    }

    .cell:nth-child(3n) {
        grid-column: 2;
    }


    .cell:nth-child(3n+1) {
        grid-column: 2;
    }

    .cell:nth-child(3n) {
        grid-column: auto/span 2;
    }

</style>
</head>

<body>
<div class="grid-contaienr">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
    <div class="cell">10</div>
    <div class="cell">11</div>
    <div class="cell">12</div>
    <div class="cell">13</div>
    <div class="cell">14</div>
    <div class="cell">15</div>
    <div class="cell">16</div>
    <div class="cell">17</div>
</div>
</body>
</html>

Я не хочу использовать сетку -area свойство, поскольку мой html контент является динамическим c.

1 Ответ

0 голосов
/ 12 апреля 2020

Вы можете передать display: grid, чтобы создать сетку в css. Вы можете прочитать больше здесь CSS_Grid_Layout 

.container {
   display:grid;
  grid-template-columns: 150px 150px;
  grid-row: auto auto;
}

.cell {
  border: 2px solid #000;
  width: 150px;
  height: 100px;
}

.container div:nth-child(2),
.container div:nth-child(3),
.container div:nth-child(6),
.container div:nth-child(7){
  background-color: blue
}
<div class="container">
      <div class="cell">1</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
      <div class="cell">4</div>
      <div class="cell">5</div>
      <div class="cell">6</div>
      <div class="cell">7</div>
      <div class="cell">8</div>
    </div>

РЕДАКТИРОВАТЬ: Добавлен синий фон в чередующихся divs

...