Нужно правильно сделать nth-child

Question

Вот макет

Для того чтобы первые пять карточек были шириной 20% есть такой css код

.infrastructure_thumb:nth-child(1),
.infrastructure_thumb:nth-child(2),
.infrastructure_thumb:nth-child(3),
.infrastructure_thumb:nth-child(4),
.infrastructure_thumb:nth-child(5) {
    width: calc(20% - 20px);
}

Для остальных пишется так

.infrastructure_thumb {
    width: calc(25% - 20px);
    margin: 10px;
}

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

Answer 1

Альтернативное решение

По вашему примеру видно, что вы хотите чтобы первый ряд состоял из 5 элементов с отступами, а остальные - 4. И вашим способом это можно делать, но я предлагаю вариант полегче и адаптивнее.

div.-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 50px;
  gap: 8px;
}

div.-first-row {
  grid-column: 1 / 5;
  display: inherit;
  grid-template-columns: repeat(5, 1fr);
  gap: inherit;
}

div.-container div:not(.-first-row) {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: rgb(200, 200, 200);
}

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

БЛОГ НА HUSL

Нужно правильно сделать nth-child

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

Альтернативное решение