Comments 32
Последнее время в околофронтендной тусовке всё чаще звучит мысль, что пора уже использовать гриды именно в порядке прогрессивного улучшения (например, недавняя статья замечательной фронтенд-разработчицы из «Нью-Йорк Таймс»). Но от главного, пожалуй, эксперта по гридам в мире эти аргументы звучат убедительнее:). Спасибо за перевод!
с grid не работал, подскажите пожалуйста, чем grid возможно лучше или хуже flex (или правильнее сказать, что есть у одного, чего нет у другого)? сейчас плотно работаю именно с flex и все вроде как устраивает :) grid для меня пока неизвестность…
спасибо
Главные отличия гридов от флексбоксов:
- флексбоксы одномерные ("полуторамерные" в случае
flex-wrap: wrap), а гриды двумерные; - во флексбоксах элементы сами ищут себе место, а в гридах место им указывает, собственно, грид (который является свойством контейнера).
Соответственно, в гридах элементы сохраняют вертикальные связи между собой (примерно как в таблице, но без доп. разметки), так что их всегда можно расставить по аккуратной сетке. И могут отрисовываться по мере загрузки без "перескоков", поскольку положение каждого элемента можно задать независимо от других (как с posiition:absolute, но лучше:). Зато на флексбоксах проще заполнять контейнер элементами разной величины (напр. картинками разных пропорций) — тут вертикальные связи скорее мешают. Но если размеры элементов известны заранее, то с минимальными дополнительными усилиями из гридов можно сделать что-то вроде Masonry.
В общем, свои преимущества есть везде, но «по сумме баллов» гриды круче:)
Для свойств декора, типа скругленных уголков или теней — это очень хороший уровень, их можно и нужно использовать. Старым браузерам по возможности давать фолбеки, а если это невозможно или сложно, да и фиг с ними.
Для скелета страницы, который держит на себе всё — это абсолютно неприемлемо, за исключением редких узконишевых проектов. Для массового продакшена нужны 95% — чтобы не заморачиваться с отсталыми браузерами, а лишь слегка подпереть их костыликами, «лишь бы читалось». А сейчас фактически придется делать две параллельные верстки, обе их отлаживать, тестировать и поддерживать. Зачем? Зачем мне делать красиво, если потом все равно придется всё это повторить не очень красиво? Собственно, хорошо было сказано А. Симоненко и О. Алексашенко.
Вангую, что мейнстримом гриды станут только года через полтора.
В статье Рэйчел же как раз объясняет, что не нужно делать две параллельные верстки. Нужно делать одну тупую простую верстку, хоть в одну колонку (которая вполне удовлетворит и старые мобильники, и ископаемые IE на древних офисных 1024х768), а поверх нее навешивать красоту для тех, кто может (а это уже большинство).
Конечно, от кого требуют четкой цветной картинки на черно-белых телевизорах полной красоты в ископаемых IE, тем гриды пока не показаны. Но тут можно лишь посочувствовать… причем, как показано в статье, в первую очередь юзерам.
В каждой конкретной ситуации, использование гридов может быть как абсолютно оправдано и единственно-верно (для какого-нибудь концептуального блокчейн-стартапа) так и абсолютно неприемлемо (для сайта гос-организации). Нет никакого "массового продакшена" сферического в вакууме, есть конкретные бизнес-задачи.
Что вы считаете «актуальной спецификацией»? Статус REC у W3C? Так он у них означает не «актуальный стандарт», а «добрый старый теплый ламповый стандарт»:). Актуальными и рекомендованными к повседневному использованию сам W3C считает спецификации начиная со статуса кандидата (CR). У гридов статус именно такой.
И какие «современные браузеры» вас беспокоят? Samsung Internet? Он на базе Хромиума, так что получит гриды уже с одним из ближайших обновлений. В Edge гриды тоже уже на подходе, можно даже пощупать в превью. А браузеры 2014 года и старше не современные по определению и вполне могут довольствоваться упрощенным фолбэком.
Вроде он так и не начал нормально использоваться (имею ввиду нормальное использование, а не подпорку фалбеками), а уже гриды начали обсуждать.
Причем, ладно это были мелочи типа скругленных уголков — не работает и хрен с ним. Но тут же сетка страницы. Если она не работает, то всей странице каюк. Какой смысл использовать гриды для общедоступных страниц? (да и flexbox).
P.S. Отмазка типа «это же так просто писать» не прокатит, т.к. в любом случае прийдется писать float + grid вместо одного float, а это в любом случае больше.
норм работу height 100%, vertical-align и выравнивание по ширение для блоков тоже.
Над этим уже работают (см. тут ближе к концу). Но возможность описывать расположение блоков полностью отдельно от разметки, которую дают гриды, ценна сама по себе.
Спасибо за перевод отличной статьи. Даже не думал что поддержка уже достигла 70%. Этого вполне достаточно для того, чтобы оставить текущий дизайн в качестве фолбека, и начать смотреть в будущее в котором останется только CSS Grid Layout. Саму технологию уже пощупал и в восторге.
Гриды — очень мощный и удобный инструмент, он способен спасти ваше положение и сэкономить уйму времени в разных нестандартных ситуациях. Однако, на текущий момент, они работают только если с их помощью позиционировать элементы, являющиеся прямыми потомками грид-контейнера, а поэтому, делать с их помощью что-то более сложное чем простые лейауты — не получится, к сожалению. Спецификации сабгридов пока в зачаточном состоянии...
они работают только если с их помощью позиционировать элементы, являющиеся прямыми потомками грид-контейнера
Да, это очень досадное ограничение.
Но в очень многих случаях его можно обойти с display:contents, которое давно уже работает в Фоксе, есть за флагом в Хроме (CanIUse и MDN это скрывают, но не верьте им, а попробуйте сами!) и вот-вот полноценно появится в Сафари (уже распознается, но применяется пока только к элементу <slot>).
Давайте дружно пинганем MS на эту тему, чтобы они не в очередной раз не обломали нам кайф! :)
Не спорю, display:contents — свойство очень полезное (и не только для гридов), но FF, к сожалению, потерял право быть полноценным референсным браузером, а всерьез использовать свойства спрятанные за флагом в Хроме никто не будет в рабочем проекте. Пока можно только ждать и надеяться.
Увы, с последним не поспорить. Но я рассчитываю, что Хром откроет его очень скоро (в феврале была надежда уже на 59-ю версию, видимо, что-то подзатянулось, вероятно, из-за непоняток с самой спекой… но вроде их уже разрулили). Да и Сафари не будет тянуть, а то его нынешнее поведение, что @supports(display:content) вроде бы true, а реально применить нельзя, в общем-то вполне себе баг!
Ну и Фокс, по-моему, рано списывать (либо самое время «дать ему второй шанс»). В очень многих моментах он прорабатывает поддержку новинок тщательнее того же Хрома (напр. сразу включил space-evenly и для гридов, и для флексбоксов), в его отладчике появляются просто незаменимые фичи (тот же инспектор гридов!), а с новыми версиями, где уже многопроцессность и всё такое, он и вовсе молодцом. Как минимум, как давно одна моя коллега цитировала другую свою коллегу, «гораздо не хуже» других:)
А то мы тут оперируем сферической поддержкой гридов в вакууме для абстрактной аудитории.
Но допустим, задумал я ресурс для айтишников — будет ли там поддержка больше? Ну то есть понятно, что будет, но насколько? Лично для меня это абсолютно неочевидно. Может быть, там гриды заработают к 95%, потому что гики сидят на современных браузерах. А может быть, всего лишь у 75%, потому что помимо гиков, у Хабра полно казуальных читателей.
И вообще, так ли уж сильно отличаются сферическая «обычная» аудитория от сферической «гиковой»?
Правда ли уже пора использовать CSS Grid Layout?