Почему CSS Grid не стоит делать?

Question

[7GIT]

На данный момент, большинство веб-разработчиков советуют использовать CSS Grid, а также функцию calc(). Нет сомнений, что верстка на display: grid, намного удобней. Только одно свойство gap (grid-gap) в связке с calc() творит чудеса.

Однако, у меня возникают вопросы, о том:

1. Почему крупные компании на основных сервисах (сайтах) не используют CSS Grid?
Конечно, есть исключения, где можно встретить блок или элемент блока, который построен на гридах. Но, это не серьёзно, с учетом того, что компании нахваливают систему сеток и всем советуют. Или, компания разрабатывают новый сервис и используют float`ы, даже не flexbox. Почему!? Наверное, хотят иметь большую совместимость со старыми браузерами. Зачем!? Зачем!? Зачем!?

2. Может ли CSS Grid замедлять работу браузера?
Очень редко, но замечаю, что некоторые сайты построенных на Grid системе замедляют работу моего браузера. К примеру, анимация того-же скролла, ну совсем не плавно. Совпадение? Не думаю.
Кто-то скажет, что проблем может быть масса, начиная от хостинга и заканчивая оптимизацией изображений. Возможно. Просматривая исходники проблемных сайтов, через GoogleDevTools, выявил закономерность (но это не точно), чем больше вложенных gridов и функций calc() использует сайт, тем больше сайт не отвечает ожиданию пользователя при взаимодействии, вообщем не так работает, как хотелось бы (плавность, тормаза).

Хочу узнать ваши аргументы, почему вы отказались от CSS Grid и что вы думаете о прочитанном? Всем спасибо!

Answer 1

[profesor08]

https://caniuse.com/?search=grid - 95.86%

Практически все, что можно сделать на флексах, можно сделать на гридах. Я такого не встречал. Но, многие вещи, которые легко решаются на гридах, на флексах ты упоришься делать, а делая адаптив упоришься на каждом брейкпоинте. Если бы во флексах была поддержка gap изначально, то флексы были бы офигенными. Но это свойство появилось недавно, и комфортно его использовать можно будет очень нескоро. Повторю, у гридов поддержка браузерами уже 95.86%.

Answer 2

[Вова Дружаев]

Но никто не написал почему крупные компании его не используют. Отвечу - потому что там правят балом маркетологи. Которые как последние с*чки цепляются даже за 0.1% прибыли. И др*чат своих техлидов чтоб они как погонщики гоняли своих прогеров, а те упарывались на флексах, флоатах ради этой самой поддержки отсталых компов, людей, нищебродов... зато на конфах потом поют о том ой какое зло то и это... А у самих интерфейс тупит (привет яндекс метрика с ее прелоадером и скелетоном - что за псих это сделал - бесит ждать типа ща все загрузится)
Как то так. А по факту быстродействия - ну да там наверно и js бандл на 2 мегабайта тянется, который гзипом 500 килобайт весит, а потом распаковывается, выполняется... а вы говорите про то что css виноват. Виной всегда человеческий фактор. Врядли calc замедлит страницу. Это проверить легко - создавайте макет с 1000 калькуляций - и проверьте свои догадки

Comments

[MyQuestion]

Вы сделали мой день ))

Answer 3

[n1ksON]

Большинство задач можно решить на флексах. Гриды - переизбыток.
По личному небольшому опыту, могу сказать, что гриды надобятся в 1 на каждые 50 проектов.

Comments

[Сергей delphinpro]

Будьте пожалуйста осмотрительнее в подобных заявлениях. Такие ответы могут ввести в заблуждение начинающих разработчиков.

Флекс — одномерный, в гридах — два измерения. Один этот факт делает ваше сомнительное утверждение несостоятельным. Нельзя флексами сверстать двухмерный макет. Не говоря уже о том, сколько опровержений можно привести, копнув чуть глубже.

[n1ksON]

Сергей delphinpro, и как же часто вам приходится в проектах верстать двумерные макеты?

[Сергей delphinpro]

n1ksON, В каждом макете. Другое дело, что требуемая поддержка браузеров не позволяет мне в данный момент использовать гриды. Однако это не делает их "переизбытком". Как только их можно будет заюзать на полную - буду юзать. Меньше кода, больше гибкости.

[n1ksON]

Сергей delphinpro, уж не знаю где вы работаете, но двумерные макеты (их ещё вроде веб-дизайн 3.0 называют), в реальности встречаются ещё пока что не так часто. Собственно, я останусь при своём, так как считаю, что гриды надобятся в 1 из 50 случаев.
Согласен с требуемой поддержкой, пока что гриды не юзабельны в этом плане

[profesor08]

n1ksON,

Большинство задач можно решить на флексах

Только если упороться, а если надо несколько адаптивных вариантов, то поупарываться для каждого в отдельности. При этом разница в поддержке браузерами 3.32%, стоит ради этих 3% упарвываться? А окупится ли это? А со временем разница будет уменьшаться, а кодовая база будет расти и усложняться.

Answer 4

[Ilya Olovyannikov]

Гриды - однозначно стоит использовать. Отличная спецификация, где не нужно городить кучу костылей и оберток.
Гриды - отличнейший инструмент для построения адаптивных сеток.

К сожалению, еще не ушло поколение старых браузеров и IE, где либо старые спецификации, либо совсем не поддерживаются гриды.

PS. grid-gap устарел, теперь используется просто gap, который, кстати, работает и с flex-элементами тоже!

Answer 5

[Алекс Глебов]

Во первых поддержка браузерами. Во вторых оптимальность. Grid может то, что не может flex, либо может с кучей лишних оберток, и именно в таких сложных сетках стоит его применять. Там, где можно обойтись block или flex, не нужны гриды.

Float нужен для обтекания текстом картинки. На нем делали сетки во времена ie9 и ранее.

Calc может перенести вычисления из js в css. Либо высчитать динамическое значение. Сложно представить ситуацию где calc лишний, calc(100%) разве что.

Comments

[7GIT]

Правильно ли я понимаю, что сетки у всех проектов Hubr простые. Именно поэтому Хабр нахваливает Grid`ы, а сам их не юзает?

[Алекс Глебов]

7GIT, Habr делали когда гридов не было. И даже флексов.
Как хабр может нахваливать, если это просто площадка, где делятся опытом?

[7GIT]

Алекс Глебов, Я Хабр воспринимаю, как отдельную личность )).
Давно наблюдаю за личностью, нашёл только один гридик в карьере, в мобильной верстке (фильтр и поиск).

Кстати, когда был последний глобальный редизайн, флексы уже были, но макет был сделан с помощью таблиц. А вот мобильною версию заверстали флексами ))