Johhny_gunfighter
@Johhny_gunfighter
начинающий верстальщик

Как сверстать данный макет?

Доброго времени суток. Возникла проблема при верстке даной части макета(скриншот прилагается). Нужно сверстать так, что бы карточки были резиновые, и изменяли свою ширину при сжатии окна браузера. При чем слева должно быть две карточки в ряд, а справа - восемь карточек поменьше. Пытался сделать, как в моем коде, но карточки схлопываються к левому краю. Помогает только фиксированная ширина, но мне он не подходит. Либо же %, либо же max-width.
Моя первоначальная разметка:
<div class="card-wrapper">
          <ul class="card-list">
            <li class="card-list__item"></li>
            <li class="card-list__item"></li>
          </ul>
          <ul class="cards-list">
            <li class="cards-list__item"></li>
            <li class="cards-list__item"></li>
            <li class="cards-list__item"></li>
            <li class="cards-list__item"></li>
            <li class="cards-list__item"></li>
            <li class="cards-list__item"></li>
            <li class="cards-list__item"></li>
            <li class="cards-list__item"></li>
          </ul>
</div>

.card-wrapper {
  display: flex;
}
.card-list,
.cards-list {
  list-style: var(--list-style);
  margin: 0px;
  padding: 0px;
}
.card-list__item {
  width: 48.67%;
  min-height: 693px;
  background-color: var(--main-bg-color);
  border: 1px solid black;
}
.cards-list__item {
  width: 24.33%;
  min-height: 355px;
  background-color: var(--main-bg-color);
  border: 1px solid black;
}

5ec307bd6ebcf157927496.png
  • Вопрос задан
  • 182 просмотра
Пригласить эксперта
Ответы на вопрос 2
@AlexR0v
Нужно больше оболочек для card-list.
у больших card-list родитель должен быть display: flex и flex-direction: column, либо max-width и flex-wrap: wrap.
у маленьких card-list родитель должен быть display: flex и flex-wrap: wrap.

с одним родителем для обоих card-list вы не обойдетесь, только флексы.
или сверстать по grid.
Ответ написан
Принцип flexbox противоречит принципу 'резиновый'. У вас не адаптивная, а жесткая верстка.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы