@Slash2018

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

Помогите новичку) Как сверстать эту сетку?
44a1aa78c21e45d998ecf460ebcaa623.png
  • Вопрос задан
  • 592 просмотра
Решения вопроса 2
@kuatmus
Еще как вариант с помощью 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
Ответ написан
Комментировать
VIKINGVyksa
@VIKINGVyksa
front-end developer
Смотря что вы используите. В bootstrap просто делаете 2 row в них по 4 col-md-3 в них изображение с скруглением и подписями.
Если на чистом html то можно сделать ul убрать стили списка, и у li сделать display:inline-block в них также изображение и подписи (у изображения какую-то ширину и border-radius) подписи text-align:center.

По идее ничего нет сложного просто html/css.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@drumminman
Tehwriter, mountain biker, trailbuilder
Можно с помощью 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. так что все махинации с флексбоксами к ним так же применимы.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
move2usajobs.com LLC Лос-Анджелес
от 2 000 до 4 000 $
PERX Нижний Новгород
До 50 000 ₽
05 окт. 2024, в 11:37
3000 руб./за проект
05 окт. 2024, в 09:57
4000 руб./за проект