Практически каждый фронтенд-разработчик начинает свой путь с базового пути HTML, CSS и JavaScript. Вы начинаете со структуры, заставляете ее выглядеть достойно, а затем заставляете ее что-то делать. Однако на каком-то этапе пути легко увлечься миром фреймворков CSS и упустить из виду некоторые мелкие детали.

Bootstrap поставляется с красивой симпатичной сеткой, в которой используется всего несколько классов и CDN, чтобы сделать эту симпатичную, адаптивную к мобильным устройствам сетку. И прежде чем вы это узнаете, вы начинаете обращаться к этой структуре всякий раз, когда создаете проект, для которого требуется макет сетки. Я часто делал то же самое, пока не начал «Gettin’ Griddy With It ».

На путь изучения CSS Grid меня подтолкнуло то, что я пытался создать сайт с помощью Semantic UI React (более красивый и менее расплывчатый Bootstrap). Однако при создании сетки я не мог заставить два столбца сидеть на одном уровне. друг с другом, и в конечном итоге испортил все правила полей и отступов под солнцем, чтобы переопределить стили, встроенные в фреймворк. Это было разочаровывающим опытом, и я тратил больше времени на то, чтобы возиться с правилами специфичности, чем на самом коде.

Вот тут и приходит на помощь CSS Grid. CSS Grid - относительно новое дополнение к CSS3, и, черт возьми, оно дурацкое. Необходимость перехода к импортированной сетке приводит к нескольким проблемам:

  1. Увеличен размер файлов. Чем больше вы импортируете, тем больше становится ваше приложение. В момент, когда скорость является ключевым фактором, уменьшение размера файла приложения - невероятно важная идея, которую следует учитывать. Вместо того, чтобы импортировать фреймворк или полагаться на медленный CDN, вы можете создать свой собственный.
  2. Менее читаемый код. Те из вас, кто использовал фреймворк, знают, что вместе с ним появляются все более сложные и расплывчатые имена классов. Кто не сразу узнает, что означаетclass="col-6 col-md-4 col-sm-12"? Или кто хочет в конечном итоге написать div.ui.segment.inverted.stackable.desktop.twelve.mobile.sixteen в своем CSS?
  3. Меньше настроек. Встроенные правила фреймворка сложно переопределить. Вы можете получить длинные имена классов, чтобы добиться правильной специфики, или закончить строку за строкой тегов !important для создания пользовательских стилей, которые переопределяют структуру. Магия CSS Grid заключается в том, что вы можете создавать свои собственные и настраивать их в соответствии с вашими потребностями, а не полагаться на тех, кто не имел в виду специфику вашего проекта.

Адаптивная CSS-сетка

CSS Grid - это, по сути, группа блоков, которые вы можете разместить на странице. Вы можете использовать числовые единицы для увеличения размеров ящиков или относительные размеры, чтобы сделать их более отзывчивыми. Учитывая огромное разнообразие размеров экранов, это большой плюс. Предположим, вы хотите создать макет из шести div и хотите, чтобы они реагировали с большим количеством столбцов для разных размеров экрана.

Вот как это выглядит в неформатированном виде как шесть divs в контейнере.

Вместо того, чтобы добавлять классы для каждой точки останова, вы можете установить минимальный размер div в сетке, а затем автоматически заполнить более крупными адаптивными полями с помощью свойства fr sizing. Вам нужно только добавить свойства CSS Grid для родительского элемента, и тогда small-box div заполнятся автоматически.

CSS для контейнера выглядит следующим образом:

Как видите, вы можете создать простую адаптивную сетку всего из четырех строк кода. Нет ничего проще, и весь ваш контент можно свободно перемещать и перемешивать по мере необходимости. В этом случае даже не нужны медиа-запросы. Отсюда вы можете свободно настраивать отдельные поля в сетке. Он достаточно гибкий для адаптивных макетов и размеров. Поиграйте с ним и наблюдайте, как ящики волшебным образом перемещаются.

Области сетки

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

Ниже приведен пример макета сайта, который может вам понадобиться на компьютере и планшете. Изменить это довольно просто. Хотя некоторым не нравится эта структура, вы и используете шаблонную структуру, подобную ASCII, для областей сетки.

Допустим, у вас есть базовый макет страницы с заголовком, боковыми панелями, контентом и нижним колонтитулом.

Макет страницы без форматирования будет выглядеть следующим образом с базовой сеткой из трех столбцов, установленной на 1fr 4fr 1fr. Поля заполнятся в соответствии с отведенным им пространством в сетке. Однако, если вы хотите, чтобы макет вашей страницы был более гибким и динамичным, как показано ниже, вы можете использовать template-areas.

Чтобы получить желаемый макет, вам необходимо создать области шаблона. Вы можете думать об этом как о миниатюрной карте ASCII, которая показывает, где вы хотите, чтобы поля помещались на странице.

Чтобы получить макет рабочего стола, вы создаете свою миниатюрную карту, как в свойстве grid-template-areas. Каждая строка содержит строку и имена соответствующих столбцов макета. Вы можете видеть, что разделы верхнего и нижнего колонтитула растянутся вдоль всех столбцов, в которые они помещены. Также боковые панели и содержимое растягиваются на несколько строк, как вы можете видеть в области «карты». Затем это можно преобразовать в любой нужный макет, добавив свойство grid-area к соответствующим блокам div, как на крайнем правом рисунке. Вы можете назвать их как угодно, что соответствует вашему проекту.

Чтобы заставить его работать в представлении планшета, вам просто нужно сделать медиа-запрос и переключить порядок в областях вашего шаблона. Легко перемещайте контент для желаемого просмотра. (Обратите внимание, что это может привести к проблемам с программами чтения с экрана, если у вас есть неупорядоченный контент, поэтому убедитесь, что ваш контент по-прежнему читается логически.)

Заключение

Этот простой пост определенно лишь поверхностно описывает то, что вы можете делать с CSS Grid. Но я думаю, что главное, что можно извлечь из этого, - это то, что вы не должны бояться использования CSS Grid. Когда вы освоите новый синтаксис, он действительно станет довольно простым, мощным и легким. Продолжайте и наслаждайтесь "Gettin’ Griddy With It ".

Для получения дополнительной информации о CSS Grid я настоятельно рекомендую проверить http://cssgrid.io, преподаваемый Весом Босом. Это фантастический учебник по CSS Grid.

Также, поскольку у вас есть вопросы, обязательно посетите сайт CSS Tricks по адресу https://css-tricks.com/snippets/css/complete-guide-grid/, чтобы узнать больше о сетке.

Чтобы узнать больше о моих работах, посетите https://theran.co и узнайте больше обо мне.