Почему области моего шаблона не складываются, как я ожидаю? - PullRequest
Новая
       17

Почему области моего шаблона не складываются, как я ожидаю?

1 голос
/ 24 марта 2019

Использование следующего css: 

.container {
  display : grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    'first second'
    'first second'
;
}

.first {
  grid-area: first;
  width: 200px;
  height: 200px;
  background-color: red;
}

.second {
  grid-area: second;
  width: 200px;
  height: 200px;
  background-color: #0eb5d6;

Эти поля будут складываться (отображаются как один красный, 1 синий): 

  <div class="container">
    <div class="first"></div>
    <div class="second"></div>
    <div class="first"></div>
    <div class="second"></div>
  </div>

Однако они не будут складываться и будут отображаться правильнокак 2 строки с одним и тем же css: 

  <div class="container">
    <div class="first"></div>
    <div class="second"></div>
  </div>

  <div class='container'>
    <div class="first"></div>
    <div class="second"></div>
  </div>

В моем случае фактического использования я пытаюсь выровнять форму, используя сетку css.Я хотел бы, чтобы не нужны div для строк, если возможноИли это единственный способ избежать укладки элементов в один ряд?

1 Ответ

1 голос
/ 24 марта 2019

Обратите внимание, что здесь grid-template-areas образуют прямоугольник и поэтому first и second охватывают их столбцов. И множественное объявление будет только перекрываться:

Строка создается для каждой отдельной указанной строки, а столбец создан для каждой ячейки в строке. Несколько именованных жетонов ячеек в и между строками создать одну именованную область сетки, которая охватывает соответствующие ячейки сетки. Если эти клетки не образуют прямоугольник, объявление недействительно.

MDN

Вы можете удалить grid-template-areas здесь - без него работает нормально. Смотри демо ниже: 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.first {
  width: 200px;
  height: 200px;
  background-color: red;
}

.second {
  width: 200px;
  height: 200px;
  background-color: #0eb5d6;
}
<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="first"></div>
  <div class="second"></div>
</div>
...