Как это сверстать?

Question

[Денис]

Помогите новичку) Как сверстать эту сетку?

Comments

[holfza]

Это нереально сложно сделать!

[Владислав Старцев]

holfza: +++

Answer 1

[Kuat Mustafin]

Еще как вариант с помощью Flexbox codepen.io/anon/pen/XXRobj
Подробнее про Flexbox: frontender.info/a-guide-to-flexbox
Справочник CSS: htmlbook.ru/css
Интересные ссылки:
https://css-tricks.com/
css.yoksel.ru
frontender.info

Answer 2

[Andrey Dyrkov]

Смотря что вы используите. В bootstrap просто делаете 2 row в них по 4 col-md-3 в них изображение с скруглением и подписями.
Если на чистом html то можно сделать ul убрать стили списка, и у li сделать display:inline-block в них также изображение и подписи (у изображения какую-то ширину и border-radius) подписи text-align:center.

По идее ничего нет сложного просто html/css.

Comments

[Anton Filippov]

зачем делать 2 row?

[Andrey Dyrkov]

Антон Ф.: ну колонки не оптикают друг друга, тут две сткроки картинок, я поэтому и сказал что 2, а так может быть и много и меньше

Answer 3

[Александр Симонов]

Можно с помощью css-фреймворка, тот же Bootstrap, или если еще проще - Purecss.

<div class="pure-g">
        <div id="item1" class="pure-u-1-4">...</div>
        <div id="item2" class="pure-u-1-4">...</div>
        <div id="item3" class="pure-u-1-4">...</div>
        <div id="item4" class="pure-u-1-4">...</div>
        <div id="item5" class="pure-u-1-4">...</div>
        <div id="item6" class="pure-u-1-4">...</div>
        <div id="item7" class="pure-u-1-4">...</div>
        <div id="item8" class="pure-u-1-4">...</div>
</div>

При этом у классов pure-g по умолчанию display:flex. так что все махинации с флексбоксами к ним так же применимы.