CSS GRID: контейнер с одинаковой сеткой, с разным количеством столбцов и строк? - PullRequest
Новая
       5

CSS GRID: контейнер с одинаковой сеткой, с разным количеством столбцов и строк?

0 голосов
/ 28 февраля 2020

Я пытаюсь создать контейнер с квадратной, равной сеткой. Если я установлю для .container одинаковое количество столбцов и строк, сетка будет равна. Но если я создаю сетку, как показано ниже, и вставляю в нее элементы, сетка с этими элементами теряет свою одинаковую форму. Как это предотвратить? 

.c-containter {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-gap: 8px;
  background-color: red;
}

.c-containter::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

.e-container {
  position: relative;
  background-color: blue;
}

.e-container__item-1 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 1;
  grid-row-end: 4;
}

.e-container__item-2 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 4;
  grid-row-end: 9;
}

.e-container__item-3 {
  grid-column-start: 8;
  grid-column-end: 17;
  grid-row-start: 1;
  grid-row-end: 9;
}
<div class="c-containter">

  <div class="e-container e-container__item-1"></div>
  <div class="e-container e-container__item-2"></div>
  <div class="e-container e-container__item-3"></div>

</div>
...