@Vadim1899

Как лучше сделать сетку «в строке либо 1 блок либо 2»?

привет!
подскажите, как лучше сделать сетку "в строке либо 1 блок либо 2"?

сейчас сделано так: https://codepen.io/tvj/pen/wvdMWvK

загвоздка скорее с отступами у двойных блоков. сделал это так:
.item-single {
  flex-basis: calc(50% - 2px - 5px); // -2px на бордер и -5px на половину маргина одного блока (левого)
}

.item-single:nth-child(odd) {
  margin-right: 10px;
}


но мне кажется что высчитывать так flex-basis не совсем корректно, и для отступов есть более изящное. а главное работающее решение (сейчас просто каждому нечетному item-single добавляется маргин справа, это почему-то работает не во всех случаях)

может есть решение получше?
  • Вопрос задан
  • 47 просмотров
Пригласить эксперта
Ответы на вопрос 1
Airat-2020
@Airat-2020
Frontend developer
Привет.
Попробуй вот так:
.outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}

.item {
  background: red;
  height: 200px;
  width: 100%;
  margin-bottom: 20px;
  font-size: 30px;
  text-align: center;
  border: 1px solid black;
  box-sizing: borer-box;
}

.item-full {
  flex-basis: 100%;
}

.item-single {
  flex-basis: 49%;
}
Ответ написан
Ваш ответ на вопрос

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

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