Как себя чувствуют гриды в 2020?

Question

[ViT93]

Всем привет! При изучении гридов, натыкаюсь на материалы которые датируются 2017 - 2018 годом. В них говорится, что не совсем все браузеры поддерживают гриды. А как с этим делом обстоит в 2020? Можно уже спокойно их использовать и забыть про flexbox?

Comments

[WapSter]

Вопрос просто мега туп.

Answer 1

[Никита Михайлов]

Grid чувствует себя прекрасно.

Можно уже спокойно их использовать и забыть про flexbox?

Grid не является заменой Flex. Вот тут очень важно это понимать. Плохой идеей будет взять весь Flex на странице и заменить его на Grid

Comments

[ViT93]

Накидал такой пример, вроде отлично все получилось без флексбоксов, тогда вопрос в каких случаях лучше flexbox чем grid? Могу догадываться, что наверно в случае меню в моей примере, когда там очевидно что будет только одна строка?

[Ankhena]

ViT93, На чем верстать в 2020: гриды или флекс?

[ViT93]

Ankhena, так понимаю, если в тз нет поддержки ие, то гриды самый самолет)

[Ankhena]

ViT93, да что ж вас всех циклит на гридах-то? Прямо напасть какая-то. Уже и картинкам пишут display: grid, совсем разум потеряли.
Если на гридах оптимальное решение конкретной задачи - делайте на гридах.
Если нет - делайте другими способами.

[ViT93]

Ankhena, мне лично понравился grid-gap. В примере выше, не напрягаясь везде одинаковые отступы. Также в панели разработчика, наведя на грид можно визуально увидеть сетку.

[Ankhena]

ViT93,

мне лично понравился grid-gap.

я вас понимаю :)

[Никита Михайлов]

мне лично понравился grid-gap

Скоро это превратится просто в gap и будет использоваться как во Flex, так и в Grid. Некоторые браузеры уже поддерживают https://caniuse.com/?search=gap

Answer 2

[hellcaster]

Если Вас устраивает поддержка , то можно

Answer 3

[inkShio]

caniuse.com

Answer 4

[ReActor Дмитрий Вершанский]

Добрый день!

Когда Вы задаётесь вопросом поддержки и совместимости, той или иной технологии, смело идите на х ороший такой ресурс "CanIUse", в поисковой строке которого, пишите интересующее Вас. В результате вам отрендерится таблица поддержки запрашиваемого по всем браузерам.

Answer 5

[HamSter]

Например. Если взять современные и популярные html/css фреймворки:

1. Bootstrap 5 (уже есть альфа версия) - flex
2. ZURB Foundation 6 - flex
3. UI Kit - flex
4. Materialize CSS - float?!
5. Semantic UI -flex

Откройте themeforest HTML - popular items в топе темы с bootstrap или кастомной версткой, но на flex.

НО

Если Вы делаете современный сайт (необязательно практичный, не рассчитанный на большое количество пользователей) , вроде тех что на awwwards , то вполне можно рисковать с grid

Поддержка: caniuse

+ Гриды не могут заменить флекс, их стоит использовать вместе. Подробнее тут.

P.S: Ничего не стоит на месте, grid на замену не придут, но в помощь точно вольются, поэтому их тоже стоит разбирать на будущее!

Comments

[ViT93]

Интересно узнать, чем использование grid, может сделать сайт менее практичным?

[HamSter]

ViT93, поддержкой браузеров, выше ответы со ссылками на canIuse

[ViT93]

HamSter, если я правильно понимаю, то в основном, только ие не поддерживает (интересно им ктото еще пользуется?)

[HamSter]

ViT93, зачем задавать вопрос чтобы потом "докапываться" до ответа?! Вы спросили о тенденциях - вот Вам основные фреймворки и поддержка браузеров! Смотрите не только ие, но и мобильные девайсы. Если Вы думаете что можете гридами заменить флексы, то Вы ошибаетесь - это невозможно, потому что ими пользуются вместе. Гриды для каркаса, флексы для внутренних блоков! А вообще каждый выбирает технологии по задаче и пользуется тем что ему нравится при этом не задает вопросов!

[Виталий Першин]

ViT93, Это далеко не так. ИЕ это отдельная тема, но пользователи часто годам не обновляют браузеры, сидят на макбуках с сафари трехлетней давности. Им делаешь сайт и они спрашивают, а почему у нас в магазине все товары столбиком, ты проверяешь на всех устройствах, все отлично, понимаешь что проблема в их браузере, при чем нет, он не так уж и стар, просто определенные свойства работают с багами. Так было с флексами раньше, так будет с гридами сейчас.