@Danny13

Как сделать такой бокс (как в примере) с GRID или Flexbox?

Я увидел вот такой вот пример, очень классно, что этот box в примере имеет одинаковую высоту и ширину. Я правда попытался сделать такой бокс с flexbox или с grid, чтобы можно было для мобильного view потом разбить на колонки, но ничего не вышло.

https://codepen.io/alexlcs/pen/ZbmzPE

<div class="grid-container">
  <div class="grid-item"><div>
  <div class="grid-item"><div>
  <div class="grid-item"><div>
  <div class="grid-item"><div>
</div>


Может быть кто-нибудь подскажет как сделать такой box с 4 одинаковыми колонками, как в codepen примере с grid или flexbox?

Спасибо
  • Вопрос задан
  • 76 просмотров
Решения вопроса 2
RomanTRS
@RomanTRS
Box-ы, поместить в контейнер-обертку, с нужными стилями.

Для Flex:
.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.box { 
  flex-grow: 1;
  width: 50%;
  padding: 10px;
  overflow: auto;
}


Для Grid:
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.box {
  padding: 10px;
  overflow: auto;
}
Ответ написан
Комментировать
Kurokq
@Kurokq
Наполни смыслом каждое мгновенье
grid
flex
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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