Резонно ли использовать display:flex, display:grid? В чем реальное отличие gird от flex?

Question

[ZaxapKramer]

Периодически задаюсь вопросом: а имеет ли реальные преимущества использование flex или grid при разработке простеньких one-screen сайтов?
Смотрел на многие готовые сетки: как старые (без данных новшеств), так и flex- и grid-сетки. Flex-сетки выглядят более громоздкими (или не видел действительно добротных)...

В чем реальное отличие Flex от Grid, преимущества при использовании одного и недостатки перед другим?
Можете привести примеры сеток или css-микрофреймворков на flex или grid, которые вы сами использовали/используете?

Comments

[lufasab]

Флекс громоздкий? Это шутка такая или троллинг? Учитывая простыни wrapper'ов различных бутстрапов, и тонны клирфиксов.

[Дима Соколов]

Скорее всего, в сравнении с Grid

[ZaxapKramer]

Смотря с чем сравнивать. Bootstrap для меня - далеко не идеал, даже наоборот. Здесь речь, да, о grid и flex.

Answer 1

[Дима Паутов]

Если вы не видите отличий, значит вы не знаете, что такое flexbox и grid'ы. Уж простите. Разница в построении разметки, ну просто колоссальная.

При помощи гридов, базовую разметку всей страницы можно построить буквально парой строк css. Flexbox вам такого не даст. Как я вижу, то flexbox призван решить проблемы построения разметки через float'ы + добавить фишек сверху.

grid'ы призваны решить проблему и того и другого + добавить фишек сверху. Но гриды это не замена flexbox. Их можно и нужно использовать вместе.

Пример такой: есть всем известная масонри сетка, щас, её вручную, при помощи flexbox сделать нельзя, а вот при помощи гридов раз плюнуть. Чуете разницу?

В итоге, flexbox можно уже использовать. Я юзаю уже полгода, написал себе сетку, которая ну просто чудесная и удобная. Гриды я бы не стал юзать еще около года, полтора. Но изучать можно уже сейчас.

Comments

[Сергей Горячев]

Полностью согласен со всем вышеописанным. На флексы смотрел давно и уже с прошлого года активно использую в проектах. Гриды пока сыроваты, но если сайт планируется для основной массы с современными устройствами и браузерами (не ориентирован на бабушек из отдела кадров государственных структур), то можно использовать.

[volk0ff]

Простите за тупой вопрос. Grid уже начал штатно браузерами поддерживаться ? Или пока рано на нем сайты делать ? Спасибо

[Ivan Bogachev]

volk0ff: caniuse.com/#feat=css-grid

[volk0ff]

Ivan Bogachev: благодарю

[ZaxapKramer]

Вопрос стоял именно в "удобстве" использования flex vs grid в реальных проектах. Спасибо за разъяснение!
По поводу flex: писал на нем в jsfiddle периодически. Одним из элементов было модальное окно, которое в Chrome очень крuво ресайзилось при изменении размеров окна, при перезагрузке страницы все вставало на места. В Firefox все было в порядке. Странный баг... но именно он, от части, создает сомнения по поводу использования flex в качестве сетки.

[Александр Попов]

Судя по тому, что я читал про grid, он довольно сложен в понимании. Не так там всё интуитивно) flex-ы очень простые, но более старыми браузерами не поддерживаются увы.

Answer 2

[Gregory Bass]

Flexbox и Grid это не два противоборствующих свойства, они наоборот дополняют друг друга.
Grid - инструмент позиционирования основных блоков страницы.
Flexbox - инструмент позиционирования элементов внутри блоков, спозиционированных с помощью Grid.

GMD - пример сетки на flexbox, которую мы с командой используем и которую я сам написал.

Comments

[AndreyGovorukhin]

Привет, твоя сетка актуальна сейчас? Понравилась идея с миксинами, по сути чтобы добавить ее в свой gulp проект нужно перенести папку sass/gulp, _variables.sass, _settings.sass ?

[Gregory Bass]

AndreyGovorukhin, привет, да актуальна. Я правда ей давно не занимаюсь, так как перехал на андроид разработку. Но сетка рабочая. Десятки работ на ней сделал. И да чтобы ее использовать надо просто скопировать папку с миксинами в любое удобное для тебя место и в твоем sass файле импортом подключить ее первой

Answer 3

[Аркадий Тагиров]

Причина использовать только флексбокс.
Причина пользоваться библиотекой Masonry, ссылку на которую уже скинули (Только из-за плохой поддерживаемости браузерами. Надобность во фреймворках отпадёт со временем)