CSS3 как выбрать последние 4 элемента?

Question

[Yuriy]

Как выбрать 4 последние элемента в списке разбитом на 4 столбца?
Суть проблемы в следующем, если в последнем ряду остается 3, 2, 1 элемента то блоки начинают пропорционально растягиваться в зависимости от ширины контейнера. т.е. свойство flex: 1 1 auto !important; этому способствует. Нужно чтоб все блоки оставались одной ширины независимо сколько их в ряду.
Вот отсюда мысль найти последние 3 элемента и задать им другие условия. мб как-то по другому можно?

https://codepen.io/Abrakadabra-the-sans/pen/KwVdBgw

.box {
  display:flex;
  flex-wrap:wrap;
  row-gap: 1.5rem !important;
  gap: 1.5rem !important;
  align-items: center !important;
}
div.child {
  width: 360px;
  height:200px;
  position: relative;
  align-self: stretch !important;
  flex: 1 1 auto !important;
  background:red;
}

<div class="box">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div> 
  <div class="child"></div>
  <div class="child"></div> 
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Что-то типа такого

div.child:nth-child(4n+1):nth-last-child(-n+3) {
  background:yellow;
  flex: 0 1 calc((100%/4) - 0.375rem*3) !important
}
div.child:nth-child(4n+2):nth-last-child(-n+2) {
  background:blue;
  flex: 0 1 calc((100%/4) - 0.375rem*3) !important
}
div.child:nth-child(4n+3):nth-last-child(-n+1) {
  background:green;
  flex: 0 1 calc((100%/4) - 0.375rem*3) !important
}

Answer 1

[Aleksey Solovyev]

.box::after {
  content: '';
  flex: 1 1 360px;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

Comments

[Yuriy]

Хороший вариант отмечу решением, сделал правда по другому))

[Aleksey Solovyev]

Yuriy, если ваш вариант адекватный, то напишите еще один ответ с ним и отметьте его решением (тут можно отмечать несколько решений). Мб ваш вариант будет кому-то полезен.

Answer 2

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

а чем грид не устраивает? https://play.tailwindcss.com/JbHukIeQPC

Comments

[Yuriy]

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

<div class="container">
    <div class="d-flex flex-wrap align-items-center justify-content-start gap-4 row-gap-4 px-0 px-md-0">
          <div class="item flex-fill align-self-stretch">
               <div class="overload d-flex align-items-center justify-content-center"></div>
               <img src="..." />
          </div>
          ...
    </div>
</div>

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

Yuriy,

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

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

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

а в бутстрапе грид тоже есть https://getbootstrap.com/docs/5.3/layout/css-grid/...