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

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

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

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

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

Хочу узнать ваши аргументы, почему вы отказались от CSS Grid и что вы думаете о прочитанном? Всем спасибо!
  • Вопрос задан
  • 1478 просмотров
Решения вопроса 6
profesor08
@profesor08 Куратор тега CSS
https://caniuse.com/?search=grid - 95.86%

Практически все, что можно сделать на флексах, можно сделать на гридах. Я такого не встречал. Но, многие вещи, которые легко решаются на гридах, на флексах ты упоришься делать, а делая адаптив упоришься на каждом брейкпоинте. Если бы во флексах была поддержка gap изначально, то флексы были бы офигенными. Но это свойство появилось недавно, и комфортно его использовать можно будет очень нескоро. Повторю, у гридов поддержка браузерами уже 95.86%.
Ответ написан
@n1ksON
Интерн
Большинство задач можно решить на флексах. Гриды - переизбыток.
По личному небольшому опыту, могу сказать, что гриды надобятся в 1 на каждые 50 проектов.
Ответ написан
OtshelnikFm
@OtshelnikFm
Мои работы: otshelnik-fm.ru
Но никто не написал почему крупные компании его не используют. Отвечу - потому что там правят балом маркетологи. Которые как последние с*чки цепляются даже за 0.1% прибыли. И др*чат своих техлидов чтоб они как погонщики гоняли своих прогеров, а те упарывались на флексах, флоатах ради этой самой поддержки отсталых компов, людей, нищебродов... зато на конфах потом поют о том ой какое зло то и это... А у самих интерфейс тупит (привет яндекс метрика с ее прелоадером и скелетоном - что за псих это сделал - бесит ждать типа ща все загрузится)
Как то так. А по факту быстродействия - ну да там наверно и js бандл на 2 мегабайта тянется, который гзипом 500 килобайт весит, а потом распаковывается, выполняется... а вы говорите про то что css виноват. Виной всегда человеческий фактор. Врядли calc замедлит страницу. Это проверить легко - создавайте макет с 1000 калькуляций - и проверьте свои догадки
Ответ написан
cannibal_corpse
@cannibal_corpse
Верстальщик руками
Гриды - однозначно стоит использовать. Отличная спецификация, где не нужно городить кучу костылей и оберток.
Гриды - отличнейший инструмент для построения адаптивных сеток.

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

PS. grid-gap устарел, теперь используется просто gap, который, кстати, работает и с flex-элементами тоже!
Ответ написан
deleo547
@deleo547
Еще один фронтендер
Недавно делал проект использовал гриды, но потом оказалось, что необходима поддержка 49го хрома.
Вот собственно и причина отказа))
Ответ написан
SkiperX
@SkiperX Куратор тега CSS
Во первых поддержка браузерами. Во вторых оптимальность. Grid может то, что не может flex, либо может с кучей лишних оберток, и именно в таких сложных сетках стоит его применять. Там, где можно обойтись block или flex, не нужны гриды.

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

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

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

Войти через центр авторизации
Похожие вопросы