[Перевод] Правда ли уже пора использовать CSS Grid Layout?
Комментарии (13)
malinichev
6 июля 2017 в 20:23
+1↑
↓
Спасибо!
psywalker
6 июля 2017 в 20:37
0↑
↓
Скажите это самой Рейчел Эндрю, а лучше порадуйте её новостью, что вы уже давно используете гриды в своих проектах, и уверен, что она будет очень рада это слышать :)
pvasili
6 июля 2017 в 23:20 (комментарий был изменён)
+1↑
↓
Лучше её посмотреть. Даже в переводе
-
psywalker
6 июля 2017 в 23:21
0↑
↓
Согласен, спасибо за ссылку!
6 июля 2017 в 21:50
+1↑
↓
Последнее время в околофронтендной тусовке всё чаще звучит мысль, что пора уже использовать гриды именно в порядке прогрессивного улучшения (например, недавняя статья замечательной фронтенд-разработчицы из «Нью-Йорк Таймс»). Но от главного, пожалуй, эксперта по гридам в мире эти аргументы звучат убедительнее:). Спасибо за перевод!
6 июля 2017 в 21:55
0↑
↓
спасибо за статью
с grid не работал, подскажите пожалуйста, чем grid возможно лучше или хуже flex (или правильнее сказать, что есть у одного, чего нет у другого)? сейчас плотно работаю именно с flex и все вроде как устраивает :) grid для меня пока неизвестность…спасибо
-
psywalker
6 июля 2017 в 22:05
0↑
↓
Здравствуйте! Эх, печально конечно, что вы ещё даже не познакомились с этим потрясающем модулем. Но никогда не поздно начать, и мы очень рады, что вы проявляете интерес. Я бы посоветовал вам начать вот с этих трёх статей (раз, два, три), ну, а после пробежаться по остальным. Так будет намного лучше, чем описывать (что, в принципе, невозможно) это в одном комментарии :)6 июля 2017 в 22:15
+1↑
↓
оки, спасибо, обязательно почитаю :-)
6 июля 2017 в 22:14
+1↑
↓
Главные отличия гридов от флексбоксов:
- флексбоксы одномерные («полуторамерные» в случае
flex-wrap: wrap), а гриды двумерные; - во флексбоксах элементы сами ищут себе место, а в гридах место им указывает, собственно, грид (который является свойством контейнера).
Соответственно, в гридах элементы сохраняют вертикальные связи между собой (примерно как в таблице, но без доп. разметки), так что их всегда можно расставить по аккуратной сетке. И могут отрисовываться по мере загрузки без «перескоков», поскольку положение каждого элемента можно задать независимо от других (как с
posiition:absolute, но лучше:). Зато на флексбоксах проще заполнять контейнер элементами разной величины (напр. картинками разных пропорций) — тут вертикальные связи скорее мешают. Но если размеры элементов известны заранее, то с минимальными дополнительными усилиями из гридов можно сделать что-то вроде Masonry.В общем, свои преимущества есть везде, но «по сумме баллов» гриды круче:)
- флексбоксы одномерные («полуторамерные» в случае
dom1n1k
6 июля 2017 в 22:48
0↑
↓
Поддержка в 65–70% — это много или мало? Всё относительно.Для свойств декора, типа скругленных уголков или теней — это очень хороший уровень, их можно и нужно использовать. Старым браузерам по возможности давать фолбеки, а если это невозможно или сложно, да и фиг с ними.
Для скелета страницы, который держит на себе всё — это абсолютно неприемлемо, за исключением редких узконишевых проектов. Для массового продакшена нужны 95% — чтобы не заморачиваться с отсталыми браузерами, а лишь слегка подпереть их костыликами, «лишь бы читалось». А сейчас фактически придется делать две параллельные верстки, обе их отлаживать, тестировать и поддерживать. Зачем? Зачем мне делать красиво, если потом все равно придется всё это повторить не очень красиво? Собственно, хорошо было сказано А. Симоненко и О. Алексашенко.
Вангую, что мейнстримом гриды станут только года через полтора.
6 июля 2017 в 23:12
+1↑
↓
В статье Рэйчел же как раз объясняет, что не нужно делать две параллельные верстки. Нужно делать одну тупую простую верстку, хоть в одну колонку (которая вполне удовлетворит и старые мобильники, и ископаемые IE на древних офисных 1024×768), а поверх нее навешивать красоту для тех, кто может (а это уже большинство).
Конечно, от кого требуют четкой цветной картинки на черно-белых телевизорах полной красоты в ископаемых IE, тем гриды пока не показаны. Но тут можно лишь посочувствовать… причем, как показано в статье, в первую очередь юзерам.
-
dom1n1k
6 июля 2017 в 23:37
0↑
↓
Тут я солидарен с тов. Станиславским.
-
psywalker
6 июля 2017 в 23:21
0↑
↓
Плюсы от «написания двух версий» всё же есть. Поскольку гриды уже поддерживаются во всех современных (ну Edge скоро догонит) браузерах, а значит велика доля вероятности, что бОльший процент аудитории вашего сайта увидит именно грид-версию. А плюсы, которые он от этого получит, это, к примеру, та же скорость, а ваши разработчики, которые поддерживают сайт, так же получат плюсы в виде лёгкой поддержки сайта. И что касается «писать лишние стили для гридов», то тут тоже ничего страшного нет, поскольку для решения задачи вёрстки того же каркаса может потребоваться всего одна строка кода (гриды настолько сильны, что порой большего не требуют). Всё это с лихвой окупает затраты, я считаю ;)
