3 последних grid элемента на всю ширину контейнера

Question

Есть grid контейнер с элементами. Каким-нибудь образом возможно 3 последних элемента под классами item-11, item-12 и item-13 распределить (растянуть) равномерно по всей ширине контейнера, при этом сохранив всю остальную структуру?

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  justify-items: stretch;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000000;
  height: 50px;
}

.item-1 {
  height: 112px;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.item-2 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.item-3 {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}

.item-4 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.item-5 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

.item-6 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.item-7 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.item-8 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.item-9 {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

.item-10 {
  height: 112px;
  grid-column: 3 / 5;
  grid-row: 3 / 5;
}

<div class="grid">
  <div class="item item-1">item 1</div>
  <div class="item item-2">item 2</div>
  <div class="item item-3">item 3</div>
  <div class="item item-4">item 4</div>
  <div class="item item-5">item 5</div>
  <div class="item item-6">item 6</div>
  <div class="item item-7">item 7</div>
  <div class="item item-8">item 8</div>
  <div class="item item-9">item 9</div>
  <div class="item item-10">item 10</div>
  <div class="item item-11">item 11</div>
  <div class="item item-12">item 12</div>
  <div class="item item-13">item 13</div>
</div>

Answer 1

Получилось реализовать самому, решение - разбить grid контейнер на 12 колонок:

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  justify-items: stretch;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000000;
  height: 50px;
}

.item-1 {
  height: 112px;
  grid-column: 1 / 7;
  grid-row: 1 / 3;
}

.item-2 {
  grid-column: 7 / 10;
  grid-row: 1 / 2;
}

.item-3 {
  grid-column: 10 / 13;
  grid-row: 1 / 2;
}

.item-4 {
  grid-column: 7 / 10;
  grid-row: 2 / 3;
}

.item-5 {
  grid-column: 10 / 13;
  grid-row: 2 / 3;
}

.item-6 {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}

.item-7 {
  grid-column: 4 / 7;
  grid-row: 3 / 4;
}

.item-8 {
  grid-column: 1 / 4;
  grid-row: 4 / 5;
}

.item-9 {
  grid-column: 4 / 7;
  grid-row: 4 / 5;
}

.item-10 {
  height: 112px;
  grid-column: 7 / 13;
  grid-row: 3 / 5;
}

.item-11 {
  grid-column: 1 / 5;
  grid-row: 5 / 6;
}

.item-12 {
  grid-column: 5 / 9;
  grid-row: 5 / 6;
}

.item-13 {
  grid-column: 9 / 13;
  grid-row: 5 / 6;
}

<div class="grid">
  <div class="item item-1">item 1</div>
  <div class="item item-2">item 2</div>
  <div class="item item-3">item 3</div>
  <div class="item item-4">item 4</div>
  <div class="item item-5">item 5</div>
  <div class="item item-6">item 6</div>
  <div class="item item-7">item 7</div>
  <div class="item item-8">item 8</div>
  <div class="item item-9">item 9</div>
  <div class="item item-10">item 10</div>
  <div class="item item-11">item 11</div>
  <div class="item item-12">item 12</div>
  <div class="item item-13">item 13</div>
</div>

Answer 2

Каким-нибудь образом возможно 3 последних элемента под классами item-11, item-12 и item-13 распределить (растянуть) равномерно по всей ширине контейнера, при этом сохранив всю остальную структуру?

Для "последних трех" можно использовать вот такой псевдо класс

item:nth-last-child(-n+3) {
   /* тут нужные свойства */
}

Answer 3

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  justify-items: stretch;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000000;
  grid-column: span 3;
}

.large {
  grid-column: span 6;
  grid-row: span 2;
}

.item-10 {
  grid-column: 7 / span 6;
  grid-row: 3 / span 2;
}

.item:nth-last-child(-n + 3) {
   grid-column: span 4;
}

<div class="grid">
  <div class="item large">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item item-10">item 10</div>
  <div class="item">item 11</div>
  <div class="item">item 12</div>
  <div class="item">item 13</div>
</div>

Answer 4

в целом согласен с вариантом от @Qwertiy, но все же дополню по своему и с пояснениями

grid-column: 3 / 4;

такая запись действительно нужна, только когда элемент нужно воткнуть туда где согласно заданным правилам генерации сетки, его быть не должно И уже оттуда растянуть его. такой элемент только один - 10ый.

когда нужно лишь задать позицию вопреки правилам - достаточно первого числа grid-column: 3;

когда позиция подходящая и нужно лишь растянуть - достаточно оператора span и второго числа grid-column: span 4;

.item {...}

учитывая что к этому классу относятся все потомки .grid, то и обращаться к ним можно несколько экономнее: .grid > * {...}

.item-1, .item-2, .item-3...

учитывая что все потомки идут по порядку, эти классы тоже не требуются, можно обращаться так: .grid > *:nth-child(1), .grid > *:nth-child(2), .grid > *:nth-child(3)

по итогу ваш CSS связанный с GRID'ом и вёрстка сократятся до +- такого вида:

.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

.grid > *{
  grid-column: span 3; /* "ширина"(растяжка) по умолчанию,
  остальное в этом селекторе только для наглядности сниппета */
  
  display: list-item;
  list-style: decimal inside;
  width: 100%; height: 100%;
}

.grid > *:first-child{
  grid-column: span 6;
  grid-row: span 2;
}

.grid > *:nth-child(10){
  grid-column: 7 / 13; /* растянуть с 7го по 13ый */
  grid-row: 3 / span 2; /* с 3ей, растянуть на 2шт */
}

.grid > *:nth-child(n+11){ /* 11, 12, 13 */
  grid-column: span 4;
}

<div class='grid'>
  <hr data-comment="white spac'ы только для наглядности. можно запихнуть всё в одну строку">

  <hr><hr>
  <hr><hr>

  <hr><hr>
  <hr><hr>

  <hr>

  <hr><hr><hr>
</div>

БЛОГ НА HUSL

3 последних grid элемента на всю ширину контейнера

Ответы (4 шт):