Как сделать grid сетку с разной шириной колонок в каждой строке?

Question

[tostershmoster]

Нужно чтобы было в сетке было две строки:
1) первый div width: 733px, второй div width: 547px;
2) первый div width: 547px, второй div width: 733px;
высота у всех одинаковая 362px

<div class="grid-container">
  <div class="big">Big div</div>
  <div class="small">Small div</div>
  <div class="small">Small div</div>
  <div class="big">Big div</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: repeat(2, auto);
  grid-gap: 10px;
}

.big {
  width: 733px;
  height: 362px;
  background-color: blue;
}

.small {
  width: 547px;
  height: 362px;
  background-color: red;
}

Если сделать так, то во второй строке второй div смещается вправо и начинается там же где второй div в первой строке, но во второй строке первый div меньше и получается большой разрыв между ними.

Answer 1

[Ankhena]

Нужно провести вертикальные линии по скрину. И выяснить, что колонок должно быть 3, а не 2.

Comments

[tostershmoster]

где их там три? и что это меняет?

[Антон Антон]

Автор ответа предполагает использование что-то типа

grid-template-areas:
            "a a b"
            "c d d";

или аналога на
grid-column-start: span 2;
но правильный ответ в том, что тут не нужно использовать грид

[tostershmoster]

Антон Антон, тогда нужно будет 4 класса? два для первой строки и два для второй?

[tostershmoster]

Антон Антон, хотелось бы понять почему тут не нужно использовать грид

[Антон Антон]

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

[Ankhena]

Антон Антон, ну тут без разницы флекс или грид.

Именованные области тут не нужны и создавать каждому по классу тоже не нужно.

Достаточно задать класс тем элементам, которые должны занять по 2 колонки и прописать им
grid-column: span 2;

Сам грид можно сделать каким-то таким (буду считать, что gap = 20)
1fr 166px 1fr
или 547fx 1fr 547px
или вычислить пропорции и написать в fr все три столбца (пожалуй, лучший вариант для адаптива или чтобы обезопасить себя от желания клиента изменить ширину контейнера).

grid-template-rows вообще не нужно писать, высота контента в любой момент может измениться

Также это можно сделать и флексами. (Только не двумя как в ответе Антон Антон, а одним).

Какой вариант выбрать может зависеть от адаптива. Просто, чтобы поменьше писать при перестроении.

[Сергей delphinpro]

tostershmoster,

где их там три? и что это меняет?

Глаза откройте. Или посмотрите под другим углом. Как вам угодно

[tostershmoster]

Ankhena,

Какой вариант выбрать может зависеть от адаптива. Просто, чтобы поменьше писать при перестроении.

на меньших размерах колонки будут одинаковой ширины

[Ankhena]

tostershmoster, тогда тоже без разницы, флекс или грид. Я бы выбрала грид.

Answer 2

[Антон Антон]

не пытаться забить гвозди микроскопом, а использовать два флекса