Автоматическая сетка на grid по условию?

Question

[greencost]

Добрый день.

Кажется, у меня довольно простой вопрос, но не могу найти ответ.

Есть grid-блок, внутри которого первые два элемента выстраиваются по правилу 2/3 (синий) + 1/3 (желтый), а все остальные (красные) должны занимать 100% ширины. При этом количество и теги красных могут быть разными. В принципе, у меня получается решить эту задачу вот так:

Сам код

.wrapper {
  max-width: 800px;
  background-color: #e9a058;
  margin: 0 auto;
  min-height: 300px;
  
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3,1fr);
}

.item {
  min-height: 30px;
}

.item-blue {
  background-color: blue;
  grid-column: 1 / span 2;
}

.item-yellow {
  background-color: yellow;
  grid-column: 3 / span 1;
}

.item-red {
  background-color: red;
  grid-column: 1 / span 3;
}

Ссылка на codepen

А проблема в том, что теги у красных блоков могут быть разными (и div, и img, и section), поэтому выбрать их по :nth-child не получится. Задавать им явный класс - тоже, т.к. это user-generated контент.

Есть ли какое-то автоматическое решение для этой задачи?

Comments

[Ankhena]

Всем задаете стили красных.
Первому и второму переопределяете.

Либо наоборот, используя :not

Не очень понятно, что не получилось..

[greencost]

Ankhena, проблема в том, что на реальном проекте я не могу задать стили для красных через nth, т.к. сами теги у красных разные. Там могут быть не только дивы. И по классу задать тоже не могу - т.к. элементы приходят из админки и заставлять контент-менеджера задавать классы вручную - плохая идея.

[Ankhena]

greencost,

я не могу задать стили для красных через nth

Я и не предлагала задавать красным через nth.
Перечитайте внимательно.

Все элементы это селектор *
Он, конечно, тяжеловат для этого случая, но решит вашу проблему.

[Ankhena]

greencost,

.block > * {red}
.blue {blue}
.yellow {yellow}

или (выглядит ужасно, конечно)

.block > * {red}
.block > *:first-child {blue}
.block > *:nth-child(2) {yellow}

Возможно, вариант с доп оберткой для первых двух, даже на js, обойдется дешевле, чем *

[greencost]

Ankhena, эх, да, использовать * не хотелось бы, но в целом - решение подходит. Просто я думал, ну вдруг есть какой-то хитрый хак именно гридов для этого :) В любом случае - спасибо за комментарий.

[Ankhena]

greencost, можно сделать грид в один столбец.
Первые два элемента запихать в одну клетку и задать ширину с выравниванием.