0

Вот макет введите сюда описание изображения

Для того чтобы первые пять карточек были шириной 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;
}

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

1
  • Знакомы с grid-template-columns?
    – eccs0103
    31 дек 2022 в 10:41

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.