CSS GridЭто совершенно новый способ создания макетов, это первая правильная система макетов, встроенная в браузер и дающая нам массу преимуществ.
когда ты и сегодня самый популярныйBootstrapПо сравнению с фреймворком преимущества сетки становятся особенно очевидными, вы можете не только создать макет раньше, без введения JavaScript не может быть достигнуто, но и ваш код будет легче поддерживать и понимать.
В этой статье я объясню почему.
Этикетки будут более лаконичными
в сравнении сBootstrap, использование сетки сделает ваш HTML чище, хотя это не самое важное преимущество, скорее всего, это первое, что вы заметите.
Для иллюстрации я создал макет, чтобы мы могли сравнить код, необходимый для двух версий.
Примечание: я немного оформил его в приведенном примере, но он сравнивает с нами.
BootstrapЭто не имеет значения, поэтому я просто оставляю CSS для части макета.
Bootstrap
смотреть наBootstrapМетка, которую необходимо создать.
Здесь следует отметить две вещи:
- В каждом ряду нужен один
<div>Этикетка - Имя класса используется для указания макета (
col-xs-2)
По мере роста сложности этого макета растет и HTML.
Если бы это был адаптивный сайт, он выглядел бы сложнее:
Теперь давайте посмотрим на использование макета сетки:
Я мог бы использовать здесь семантические элементы, но я все еще использую div дляBootstrapВ сравнении.
Очевидно, что сетку проще использовать для макета, уродливые имена классов и дополнительные теги div, необходимые для каждой строки, ушли, просто контейнер и элемент внутри.
а такжеBootstrapРазница в том, что по мере увеличения сложности макета сложность тегов макета Grid не будет увеличиваться слишком сильно.
BootstrapПример не нужно добавлять какие-либо CSS, просто процитировать его.CSS GridОбязательно надо добавить. В частности, это:
Это может быть в пользу некоторыхBootstrapАргумент: вы не заботитесь о CSS, просто определите макет в HTML. Но, как вы понимаете, связь между метками и макетом может стать большой проблемой, когда речь идет о гибкости.
более гибкий
Предположим, вы хотите изменить макет в соответствии с размером экрана. Например, перетащите меню в верхнюю строку, чтобы просмотреть его на мобильном устройстве.
Другими словами, макет идет от этого:
В это:
CSS Grid
использоватьCSS Gridбыло бы очень просто, нам просто нужно добавитьmedia query, макет работает как по волшебству, что вы хотите.
Вы можете изменить макет таким образом, не беспокоясь о порядке написания тегов HTML, что является большим преимуществом как для разработчиков, так и для дизайнеров!
BootStrap
если вы хотитеBootstrapЧтобы сделать то же самое в , вам нужно изменить HTML и настроить порядок тегов.
Этого требования недостаточно просто использовать медиа-запрос, вы должны использовать JavaScript.
Этот пример - самое большое преимущество сетки, которое я испытал.
Нет больше мертвых 12 столбцов
Это не большая проблема, но меня эта проблема тоже много раз беспокоила, т.к.BootstrapСистема сетки разделена на столбцы 12. Если вам нужен макет с столбцами 5, вам будет трудно, или столбцы 7, столбцы 9, все, что не будет объединено в столбцы 12.
CSS GridОграничений нет, вы можете сделать сетку ровно столько, сколько захотите. Вот сетка с 7 столбцами:
установивgrid-template-columns : repeat(7, 1fr)Реализовано так:
Поддержка браузера
Разумеется, следует также обсудить поддержку браузера, который на момент написания статьи поддерживается 75% всего трафика веб-сайта по всему миру.CSS Grid
CSS Grid— это модуль макета, который позволяет нам изменять макет документа, не нарушая порядок табуляции. Другими словами, CSS Grid — это чисто визуальный инструмент, который при правильном использовании не должен влиять на представление содержимого документа. Итак: отсутствие поддержки в старых браузерахCSS GridПоддержка не влияет на опыт посетителя, она просто делает опыт другим.