Размещение элементов сетки без использования областей шаблона

Question

У меня есть контейнер с 4 элементами, которые я хотел бы выложить так:

┌───┬───┐
│ a │ c │
╞═══╪═══╡
│ b │ d │
└───┴───┘

HTML-код выглядит примерно так:

<div id="container">
    <div id="a">

    </div>
    <div id="b">

    </div>
    <div id="c">

    </div>
    <div id="d">

    </div>
</div>

Обратите внимание, что элементысначала пройдите вниз, затем через.

Я знаю, что могу добиться этого макета, используя grid-template-areas для контейнера и grid-area для внутренних элементов.Однако это включает в себя именование всех четырех из этих элементов по отдельности.

Есть ли способ достижения одинакового расположения без индивидуального именования этих элементов?

Answer 1

Добавьте grid-auto-flow: column к вашему сеточному контейнеру.Нет необходимости в grid-template-areas.

Это свойство управляет направленным потоком элементов сетки.Значением по умолчанию является row.

#container {
  display: inline-grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 50px 50px;
  grid-gap: 5px;
  grid-auto-flow: column;
}

/* non-essential demo styles */
#container > div {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">e</div>
</div>

§ 7.7.Автоматическое размещение: свойство grid-auto-flow

[Это свойство] управляет работой алгоритма автоматического размещения, точно определяя, как автоматически размещаемые элементы попадают в сетку.

row

Алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди, добавляя новые строки по мере необходимости.Если не указано ни row, ни column, предполагается строка.

column

Алгоритм автоматического размещения размещает элементызаполняя каждый столбец по очереди, добавляя новые столбцы по мере необходимости.