Pull to refresh

Comments 32

Скажите это самой Рейчел Эндрю, а лучше порадуйте её новостью, что вы уже давно используете гриды в своих проектах, и уверен, что она будет очень рада это слышать :)
Согласен, спасибо за ссылку!

Последнее время в околофронтендной тусовке всё чаще звучит мысль, что пора уже использовать гриды именно в порядке прогрессивного улучшения (например, недавняя статья замечательной фронтенд-разработчицы из «Нью-Йорк Таймс»). Но от главного, пожалуй, эксперта по гридам в мире эти аргументы звучат убедительнее:). Спасибо за перевод!

спасибо за статью
с grid не работал, подскажите пожалуйста, чем grid возможно лучше или хуже flex (или правильнее сказать, что есть у одного, чего нет у другого)? сейчас плотно работаю именно с flex и все вроде как устраивает :) grid для меня пока неизвестность…

спасибо
Здравствуйте! Эх, печально конечно, что вы ещё даже не познакомились с этим потрясающем модулем. Но никогда не поздно начать, и мы очень рады, что вы проявляете интерес. Я бы посоветовал вам начать вот с этих трёх статей (раз, два, три), ну а после пробежаться по остальным. Так будет намного лучше, чем описывать (что, в принципе, невозможно) это в одном комментарии :)
оки, спасибо, обязательно почитаю :-)
Или сразу читайте здесь – тут вся инфа о гридах собрана в одной статье.

Главные отличия гридов от флексбоксов:


  • флексбоксы одномерные ("полуторамерные" в случае flex-wrap: wrap), а гриды двумерные;
  • во флексбоксах элементы сами ищут себе место, а в гридах место им указывает, собственно, грид (который является свойством контейнера).

Соответственно, в гридах элементы сохраняют вертикальные связи между собой (примерно как в таблице, но без доп. разметки), так что их всегда можно расставить по аккуратной сетке. И могут отрисовываться по мере загрузки без "перескоков", поскольку положение каждого элемента можно задать независимо от других (как с posiition:absolute, но лучше:). Зато на флексбоксах проще заполнять контейнер элементами разной величины (напр. картинками разных пропорций) — тут вертикальные связи скорее мешают. Но если размеры элементов известны заранее, то с минимальными дополнительными усилиями из гридов можно сделать что-то вроде Masonry.


В общем, свои преимущества есть везде, но «по сумме баллов» гриды круче:)

Поддержка в 65-70% — это много или мало? Всё относительно.

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

Для скелета страницы, который держит на себе всё — это абсолютно неприемлемо, за исключением редких узконишевых проектов. Для массового продакшена нужны 95% — чтобы не заморачиваться с отсталыми браузерами, а лишь слегка подпереть их костыликами, «лишь бы читалось». А сейчас фактически придется делать две параллельные верстки, обе их отлаживать, тестировать и поддерживать. Зачем? Зачем мне делать красиво, если потом все равно придется всё это повторить не очень красиво? Собственно, хорошо было сказано А. Симоненко и О. Алексашенко.

Вангую, что мейнстримом гриды станут только года через полтора.

В статье Рэйчел же как раз объясняет, что не нужно делать две параллельные верстки. Нужно делать одну тупую простую верстку, хоть в одну колонку (которая вполне удовлетворит и старые мобильники, и ископаемые IE на древних офисных 1024х768), а поверх нее навешивать красоту для тех, кто может (а это уже большинство).


Конечно, от кого требуют четкой цветной картинки на черно-белых телевизорах полной красоты в ископаемых IE, тем гриды пока не показаны. Но тут можно лишь посочувствовать… причем, как показано в статье, в первую очередь юзерам.

Тут я солидарен с тов. Станиславским.
А теперь расскажите это заказчику.

Так Рэйчел в статье же как раз показывает, как объяснить это заказчику, разве не так? :)

Плюсы от «написания двух версий» всё же есть. Поскольку гриды уже поддерживаются во всех современных (ну Edge скоро догонит) браузерах, а значит велика доля вероятности, что бОльший процент аудитории вашего сайта увидит именно грид-версию. А плюсы, которые он от этого получит, это, к примеру, та же скорость, а ваши разработчики, которые поддерживают сайт, так же получат плюсы в виде лёгкой поддержки сайта. И что касается «писать лишние стили для гридов», то тут тоже ничего страшного нет, поскольку для решения задачи вёрстки того же каркаса может потребоваться всего одна строка кода (гриды настолько сильны, что порой большего не требуют). Всё это с лихвой окупает затраты, я считаю ;)

В каждой конкретной ситуации, использование гридов может быть как абсолютно оправдано и единственно-верно (для какого-нибудь концептуального блокчейн-стартапа) так и абсолютно неприемлемо (для сайта гос-организации). Нет никакого "массового продакшена" сферического в вакууме, есть конкретные бизнес-задачи.

Под массовостью я подразумевал проекты для широкой аудитории, которую нельзя очертить например техногиками (все пользуются современными браузерами) или интранетом одной организации (браузер поставят какой нужно).
Если нельзя нарисовать четкие границы аудитории — это оно.
Конечно, используйте. Только потом не удивляйтесь, что не найдете grid-layout в актуальной спецификации, а так же поддержки в современных браузерах. Ничего лучше чем верстка таблицами еще не придумали.

Что вы считаете «актуальной спецификацией»? Статус REC у W3C? Так он у них означает не «актуальный стандарт», а «добрый старый теплый ламповый стандарт»:). Актуальными и рекомендованными к повседневному использованию сам W3C считает спецификации начиная со статуса кандидата (CR). У гридов статус именно такой.


И какие «современные браузеры» вас беспокоят? Samsung Internet? Он на базе Хромиума, так что получит гриды уже с одним из ближайших обновлений. В Edge гриды тоже уже на подходе, можно даже пощупать в превью. А браузеры 2014 года и старше не современные по определению и вполне могут довольствоваться упрощенным фолбэком.

Что-то я пропустил, куда делся Flexbox? Про него уже все забыли?

Вроде он так и не начал нормально использоваться (имею ввиду нормальное использование, а не подпорку фалбеками), а уже гриды начали обсуждать.

Причем, ладно это были мелочи типа скругленных уголков — не работает и хрен с ним. Но тут же сетка страницы. Если она не работает, то всей странице каюк. Какой смысл использовать гриды для общедоступных страниц? (да и flexbox).

P.S. Отмазка типа «это же так просто писать» не прокатит, т.к. в любом случае прийдется писать float + grid вместо одного float, а это в любом случае больше.
Последнее время какая то тенденция всё перемудрить, то есть сделать сложнее чем необходимо, и это касается и flex. Зачем вводить новые типы блоков, или единицы измерения когда можно чуть допилить уже существующую модель и всё бы работало. Имхо достаточно было сделать норм работу height 100%, vertical-align и выравнивание по ширение для блоков тоже. Всё бы работало так как и ждет от этого верстальщик и не нужно было никаких комплексных гайдов по флексбоксам, всё было интуитивно.
норм работу height 100%, vertical-align и выравнивание по ширение для блоков тоже.

Над этим уже работают (см. тут ближе к концу). Но возможность описывать расположение блоков полностью отдельно от разметки, которую дают гриды, ценна сама по себе.

Спасибо за перевод отличной статьи. Даже не думал что поддержка уже достигла 70%. Этого вполне достаточно для того, чтобы оставить текущий дизайн в качестве фолбека, и начать смотреть в будущее в котором останется только CSS Grid Layout. Саму технологию уже пощупал и в восторге.

UFO just landed and posted this here

Будь ваша воля, вы смогли бы сверстать только простую гипертекстовую страницу и никогда бы не сделали удобное отзывчивое веб-приложение способное на что-то более сложное, чем ввод логина и пароля. Но вам, в вашем 2000-м, видимо виднее как оно надо...

UFO just landed and posted this here

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

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

Да, это очень досадное ограничение.


Но в очень многих случаях его можно обойти с display:contents, которое давно уже работает в Фоксе, есть за флагом в Хроме (CanIUse и MDN это скрывают, но не верьте им, а попробуйте сами!) и вот-вот полноценно появится в Сафари (уже распознается, но применяется пока только к элементу <slot>).


Давайте дружно пинганем MS на эту тему, чтобы они не в очередной раз не обломали нам кайф! :)

Не спорю, display:contents — свойство очень полезное (и не только для гридов), но FF, к сожалению, потерял право быть полноценным референсным браузером, а всерьез использовать свойства спрятанные за флагом в Хроме никто не будет в рабочем проекте. Пока можно только ждать и надеяться.

Увы, с последним не поспорить. Но я рассчитываю, что Хром откроет его очень скоро (в феврале была надежда уже на 59-ю версию, видимо, что-то подзатянулось, вероятно, из-за непоняток с самой спекой… но вроде их уже разрулили). Да и Сафари не будет тянуть, а то его нынешнее поведение, что @supports(display:content) вроде бы true, а реально применить нельзя, в общем-то вполне себе баг!


Ну и Фокс, по-моему, рано списывать (либо самое время «дать ему второй шанс»). В очень многих моментах он прорабатывает поддержку новинок тщательнее того же Хрома (напр. сразу включил space-evenly и для гридов, и для флексбоксов), в его отладчике появляются просто незаменимые фичи (тот же инспектор гридов!), а с новыми версиями, где уже многопроцессность и всё такое, он и вовсе молодцом. Как минимум, как давно одна моя коллега цитировала другую свою коллегу, «гораздо не хуже» других:)

Предлагаю администрации (@Boomburum) опубликовать браузерную статистику Хабра, хотя бы в самых общих чертах.
А то мы тут оперируем сферической поддержкой гридов в вакууме для абстрактной аудитории.
Но допустим, задумал я ресурс для айтишников — будет ли там поддержка больше? Ну то есть понятно, что будет, но насколько? Лично для меня это абсолютно неочевидно. Может быть, там гриды заработают к 95%, потому что гики сидят на современных браузерах. А может быть, всего лишь у 75%, потому что помимо гиков, у Хабра полно казуальных читателей.
И вообще, так ли уж сильно отличаются сферическая «обычная» аудитория от сферической «гиковой»?
Only those users with full accounts are able to leave comments. Log in, please.