Как сделать такую сетку на inline-block?

Question

[pandaa]

HTML:

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

Answer 1

[Валентин Бируля]

А что собственно не получается? Вам каждому блоку нужно задать марджин(Верхнему-правому марджин низ и вправо Верхнему правому марджин низ и тд.) ,что бы вышло ровно

Или вы про бордер у инлайн блоков?
Код на css

.container {
  width:498px;
  height:498px;
  background-color:red;
}
.item{
  width:245px;
  height:245px;
  display:inline-block;
  background-color:green;
  border: 1px dashed black;
}

Comments

[pandaa]

Нужно чтобы они как то автоматически выравнивались друг от друга, потому что эти элементы будут удаляться, если написать марджины, то потом все полетит

[Валентин Бируля]

pandaa, Тогда вам лучше действительно использовать флексбокс

[pandaa]

The Wizard of Oz, Grid не могу (объяснять долго, поэтому просто не могу). Flexbox? А можно пример?

[Валентин Бируля]

pandaa, https://html5book.ru/css3-flexbox/ Флексбокс это отдельная тема в ксс вот статья прочитайте сделайте

Answer 2

[Tim]

Comments

[Tim]

на флексах

Answer 3

[Vladislav]

Answer 4

[Семен]

Здравствуйте.

pandaa, поддерживаю предложения с флексами. Оно само просится.

Дополню:
1. Для чего делать из блоков строки?

Строка это то, что находится в контейнере. Ваши блоки (ведь, да?) должны будут содержать внутри себя что-то.

Это изврат, это противоречие спецификации в котором нет неободимости.

2. Вообще, никто позиционирование с помощью transform не отменял. Оно живо. И поддержка шире, чем у флексов.

Comments

[Семен]

Но трансформ плохо идёт, когда количество блоков может меняться и позицинонирование придётся высчитывать на лету (и это неразумно делать на css).

upd
>> и это неразумно делать на css
Если вдруг стало интересно. Можно выдумать/вымучить решение на перемнных (для оптимизации и порядка внутри кода), calc() (ну, это основной инструмент расчёта), пседвоклассах поиска элементов (может пригодится/может быть незаменим).