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

Question

[алексей]

Пытаюсь реализовать подобное расположение блоков в верстке:

Нужно, чтобы все блоки выравнивались по левому и по правому краю симметрично, а отступы между ними рассчитывались исходя из размеров блоков.

Можно ли обойтись без флекс-бокс?
При установке inline-block дивам и text-align: justify получается что-то похожее. Но в этом случае если в последнем ряду оказывается не три блока, а два, они выравниваются по краям с "дырой" на месте центрального блока. Может это как-то решается?

Answer 1

[Максим Тимофеев]

Да любой framework возьмите. Если религия не позволяет (допустим Вы свидетель css1.0) тогда хотя бы посмотрите как они это реализовали, обычно это width, и padding в %.
Отличный пример для подражания:
https://getbootstrap.com/docs/3.3/css/#grid
Есть и новее, но там уже flex:
getbootstrap.com/docs/4.0/layout/grid
Если аллергия конкретно на bootstrap, то вот:
https://yandex.ru/search/?text=grid%20framework%20...

Comments

[алексей]

Можно было обойтись и без колкостей. Если религия позволяет.

[Максим Тимофеев]

алексей, без юмора (колкостей) не интересно отвечать. Мне кажется главное дать ответ, а колкости фильтр на людей с самоиронией.
Так что? Разобрались в проблемой?

[алексей]

Максим Тимофеев, Самоирония не работает, когда уставший после 12 часов работы пытаешься заставить себя делать что-то еще :) Спасибо за ответ! Вникаю в bootstrap, собирался сначала научиться всё делать без фреймворков и только потом браться за них. Но вы правы, стоит уже смотреть как сделано там и наматывать на ус.

[Максим Тимофеев]

алексей, bootstrap можно рассматривать с двух сторон:
- с одной это штука ускоряющая разработку и вредна для начинающего, так как он игнорирует основы и как следствие без bootstrap ничего сделать не может.
- с другой это набор best practice. Реально рабочие решение отточенные целым сообществом. К тому же максимально современные.
Так что я думаю начинающему надо обязательно влазить в bootstrap, material design lite, fondation, sceleton и др. Но не с целью юзать, а с целью разобрать по болтикам и понять как работает.

Answer 2

[Alexander Litvinenko]

Можно ли обойтись без флекс-бокс?

Только применив джаваскрипт и по-любому будет сложнее и хуже. На флексах это две строчки.

Comments

[Иван]

Зачем везде пихать JS? Это делается парой строчек в css.

[алексей]

Иван, но вы их, конечно, не озвучите?

[Alexander Litvinenko]

Иван, алексей, неозувучит. В цсс это можно сделать без флекса, только если принять ряд вещей за константы, тогда можно изловчиться с calc или еще чемто, смотря что именно сделали константой.

А так чтобы все автоматом и само вычисляло - или флекс, или жс.