Flash Grid: Изучите CSS Grid, построив систему сетки

Flash Grid: Изучите CSS Grid, построив систему сетки

От автора: в последнее время я экспериментировал с идеей создания облегченной системы сетки на основе CSS Grid. У нас в CodyFrame есть система сетки, и она основана на Flexbox. Однако CSS Grid имеет так много мощных функций, которых нет во Flexbox, что я в итоге создал Flash Grid.

Я собираюсь рассказать обо всем процессе создания Flash Grid. Если вы хотите больше узнать о CSS Grid, это отличное место для начала, так как мы коснемся основных свойств CSS Grid и рассмотрим некоторые практические приемы, чтобы максимально эффективно использовать эту мощную систему макетов.

В случае, если вы хотите пропустить руководство и просто взять код:

Скачать Flash Grid на Github

Смотреть на Codepen

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Давайте начнем! Первый шаг — создание класса .grid:

При определении количества колонок сетки мы используем флаг SCSS !default в случае, если система сетки импортируется как модуль, и мы хотим, чтобы это значение было настраиваемым.

В свойстве grid-template-columns, где мы определяем макет сетки: нам нужны 12 адаптивных колонок. Ширина каждой колонки составляет 1 fr. Fr (дробная единица) — это умная единица, равная 1 части доступного пространства. Поскольку наша сетка состоит из 12 колонок x 1fr, каждая гибкая гибкий колонка занимает 1/12 доступной ширины.

Функция repeat() позволяет передавать одно значение ширины (1fr). Другой способ определить ту же сетку:

… но, вы видите … это не так элегантно! Вот краткий обзор только что созданной нами сетки:

Flash Grid: Изучите CSS Grid, построив систему сетки

На приведенном выше снимке экрана обратите внимание на числа между столбцами (пока фокусируйтесь только на положительных числах сверху). Эти номера строк можно использовать для размещения элементов сетки.

Во фрагменте .grid мы также указываем все дочерние элементы сетки и устанавливаем их значение grid-column-end равным span 12.

По умолчанию мы хотим, чтобы каждый дочерний элемент занимал всю доступную ширину. grid-column-end используется для указания конечной позиции элемента сетки. Вы можете использовать это свойство для установки конечной строки (например, grid-column-end: 3;). Но если вы используете волшебное слово «span», вы определяете, сколько столбцов должно занимать элемент сетки. Например, grid-column-end: span 12; означает «растянуть этот элемент на 12 колонок».

Зачем устанавливать диапазон по умолчанию в 12 столбцов для элементов сетки? Мы работаем с мобильными устройствами. Мы можем предположить, что в большинстве случаев наши элементы сетки будут сначала занимать всю ширину (12 столбцов), а затем меньшее количество столбцов на больших экранах. Наше значение по умолчанию не позволяет указывать каждый элемент сетки .col-12 (span 12) вручную.

Количество столбцов задается как пользовательское свойство CSS, если вы хотите изменить его на уровне компонента (или путем создания других служебных классов). Например:

Далее мы можем определить служебные классы для свойства grid-gap:

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

Свойство grid-gap используется для определения пространства между элементами сетки. Чтобы завершить базовую систему сетки, мы должны определить классы .col:

Мы используем цикл SASS @for для генерации классов .col в соответствии с количеством столбцов, указанных в переменной $grid-columns. Скомпилированный CSS:

Классы col определяют количество колонок, занимаемых элементом сетки. Помните, что слово «span» означает «растянуть элемент на x колонок», где x — это число, указанное после span.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Добавляем немного специфики CSS Grid

Напомним, что базовая версия Flash Grid включает в себя определение сетки, зазоров сетки и служебных классов col. Теперь пришло время добавить немного специфики! Вот полезный класс .grid-auto-cols:

Этот класс похож на .grid, за исключением того, что мы не устанавливаем количество колонок. auto-fit заменяет 12 в классе .grid. Это означает, что CSS Grid может определять количество столбцов на основе значения ширины столбцов (второе значение функции repeat ()).

Но подождите! Значение ширины (1fr в классе .grid) теперь заменяется функцией minmax(). Это буквально означает, что минимальная ширина столбца равна 0, а максимальное значение равно 1fr. Мы устанавливаем диапазон значений для ширины столбца.

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

Flash Grid: Изучите CSS Grid, построив систему сетки

Используя аналогичный подход, мы создаем служебные классы .grid-auto-{size}:

В отличие от .grid-auto-cols минимальное значение ширины этих новых классов равно —col-min-width. В результате получается адаптивная сетка, в которой добавляется новая колонка, когда для нее достаточно места (минимальная ширина, указанная в функции minmax()).

Flash Grid: Изучите CSS Grid, построив систему сетки

С помощью служебных классов .grid-auto ( .grid-auto-colsи .grid-auto-{size}) вы можете создавать адаптивные макеты без использования классов .col в элементах сетки. На самом деле, вы не должны использовать классы .col вообще, если хотите, чтобы классы .grid-auto работали правильно.

Наконец, чтобы воспользоваться преимуществами номеров строк сетки, мы можем создать новый набор служебных классов: col-start-{line-number} и .col-end-{line-number}.

Классы .col-start переходят из .col-start-1 в col-start-12, а классы .col-end из .col-end-2 в .col-end-13. Используйте их, если хотите, чтобы элемент сетки находился между определенной начальной и конечной линиями. Помните, что это номера строк:

Flash Grid: Изучите CSS Grid, построив систему сетки

Отрицательные числа внизу являются альтернативным способом указания на те же строки. Чем они полезны: если вы хотите настроить указание на последнюю строку, независимо от количества столбцов, вы можете сделать следующее:

Классы .col-start / end позволяют создавать сложные сетки:

Модификаторы классов контрольных точек

Чтобы сделать нашу сетку редактируемой в разных контрольных точках, мы можем добавить модификаторы класса. В CodyFrame соглашение заключается в добавлении суффикса @{breakpoint} к классам (например, col-4@sm) для целевых контрольных точек.

Вот пример модификаторов класса в контрольной точке x-small:

Окончательный код SCSS:

Автор: Sebastiano Guerriero

Источник: https://dev.to

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Технология CSS Grid

Руководство по адаптивной верстке

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: