Как сделать структуру блоков как на картинке?

217

11 января 2019, 08:10

Нужно таблицу из блоков как на картинке

Есть какие нибудь идеи?

Вот через флекс пробовал, не работает как хотелось бы

.parent { 
  border: 1px solid #333; 
  max-width: 490px; 
  margin: 20px; 
} 
.wrap { 
  margin: 0 -3%; 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
} 
 
.wrap::after { 
  content: ''; 
  flex: auto; 
} 
 
.item { 
  height: 85px; 
  width: 85px; 
  background: #aaa; 
  margin: 0 3% 50px; 
  display: inline-block; 
}

<div class="parent"> 
  <div class="wrap"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
  </div> 
</div>

Answer 1

Допустим... ) Принцип понятен?

* { 
  padding: 0; 
  margin: 0; 
} 
 
.wrapper {} 
 
.item { 
  width: 85px; 
  height: 85px; 
  background-color: rgba(0, 0, 0, .2); 
  float: left; 
  margin-right: calc((100% - 4 * 85px) / 3); 
  margin-bottom: calc((100% - 4 * 85px) / 3); 
} 
 
.item:nth-child(4n) { 
  margin-right: 0; 
} 
 
@media (max-width: 400px) { 
  .item { 
    margin-right: calc((100% - 3 * 85px) / 2); 
    margin-bottom: calc((100% - 3 * 85px) / 2); 
  } 
  .item:nth-child(4n) { 
    margin-right: calc((100% - 3 * 85px) / 2); 
  } 
  .item:nth-child(3n) { 
    margin-right: 0; 
  } 
}

<div class="wrapper"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Анимация вычеркивания после клика

Хочу добавить анимацию плавного вычеркивания для элемента li после клика по нему, но не могу понять где нужно устанавливать transition чтобы это...

256

javascript

Работа с таблицами в FireBase

Как я могу редактировать/добавлять записи в таблицах Firebase? Официальные документация предлагает делать так:

219

javascript

помогите тотальному новичку

когда я навожу несколько раз на элемент ul то при клике на любой элемент li выводится не конкретный элемент в consolelog а дублирвоанное количество...

236

javascript

Как правильно записать алгоритм на JS

подскажите как правильно записать алгоритм без переменной 'pro'

239