Руководство по CSS Grid Layout Fr Unit

Модуль CSS Grid Layout поставляется с новым модулем CSS, который называется fr. Как бы просто это ни было, fr – это сокращение от слова «дробь». Новый блок позволяет быстро нарезать сетку на пропорциональные столбцы или строки. В результате, создание полностью гибких и гибких сетей становится практически простым делом.

Поскольку единица дроби была введена вместе с модулем Grid Layout, вы можете использовать его в любом браузере, который поддерживает сетку CSS, Если вы также хотите поддерживать старые браузеры, вот отличный CSS сетка полифилл это позволяет вам использовать не только блок fr, но и другие функции сетки.

Читайте также: Введение в модуль CSS Grid Layout

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

Чтобы использовать модуль Grid Layout, вам нужно добавить отображение: grid; CSS свойство для оболочки. Свойство grid-template-columns использует в качестве значения единицу fr; соотношение трех столбцов составляет 1: 1: 1.

Для строк сетки (свойство grid-template-row) я не использовал единицу fr, так как это имеет смысл, только если обертка имеет фиксированную высоту. В противном случае это может привести к странным результатам на некоторых устройствах, однако даже в этом случае блок fr сохраняет соотношение (и это огромно).

Свойство grid-gap добавляет сетку размером 10px между блоками. Если вы не хотите разрыв, просто удалите это свойство.

.wrapper {
  дисплей: сетка;
  grid-template-columns: 1fr 1fr 1fr;
  сетка-шаблон-строки: 200px 200px;
  разрыв сетки: 10 пикселей;
}
.box {
  белый цвет;
  выравнивание текста: по центру;
  размер шрифта: 30 пикселей;
  отступы: 25 пикселей;
}

Обратите внимание, что вышеприведенный CSS не содержит базовых стилей, таких как фоновые цвета. Вы можете найти полный код в демоверсии в конце статьи.
Коэффициент изменения
Конечно, вы не можете использовать только 1: 1: 1, но любое соотношение, которое вы хотите. Ниже я использовал доли 1: 2: 1, которые также делят пространство на три столбца, но средний столбец будет в два раза шире, чем два других.
Я также увеличил значение разрыва сетки, чтобы вы могли видеть, как он меняет макет. По сути, браузер вычитает разрыв сетки из ширины области просмотра (в этом примере разрывы сетки составляют до 80 пикселей) и разделяет остальное в соответствии с заданными фракциями.

.wrapper {
  дисплей: сетка;
  grid-template-columns: 1fr 2fr 1fr;
  сетка-шаблон-строки: 200px 200px;
  разрыв сетки: 40 пикселей;
}

Объединяйте fr с другими элементами CSS
Вы можете комбинировать блок fr с любыми другими элементами CSS. Например, в приведенном ниже примере я использовал соотношение 60% 1fr 2fr для моей сетки.
Так как это работает? Браузер назначает 60% ширины области просмотра первому столбцу. Затем он делит остальное пространство на доли 1: 2.

То же самое можно записать как 60% 13,33333% 26,66667%. Но, честно говоря, зачем кому-то использовать этот формат? Огромное преимущество дробного модуля в том, что он улучшает читаемость кода. Более того, он абсолютно точен, поскольку процентный формат все еще составляет всего 99,9999%.

.wrapper {
  дисплей: сетка;
  grid-template-columns: 60% 1fr 2fr;
  сетка-шаблон-строки: 200px 200px;
  разрыв сетки: 10 пикселей;
}

Помимо процентов, вы также можете использовать другие единицы CSS вместе с единицей дроби, например, pt, px, em и rem.
Добавить пробел с помощью fr
Что если вы не хотите, чтобы ваш дизайн был загроможден, и добавьте пробелы в сетку? Дробная установка также имеет простое решение для этого.
Как вы можете видеть, эта сетка имеет пустой столбец, в то время как она все еще сохраняет все шесть полей. Для этого макета нам нужно разделить пространство на четыре столбца вместо трех. Итак, мы используем значение 1fr 1fr 1fr 1fr для свойства grid-template-columns.

Добавляем пустой столбец внутри Сетка-шаблон-зона свойство, используя точечную запись. По сути, это свойство позволяет ссылаться на именованные области сетки. И вы можете назвать области сетки с помощью Сетка-зона свойство, которое вам нужно использовать отдельно для каждой области.

.wrapper {
  дисплей: сетка;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  сетка-шаблон-строки: 200px 200px;
  разрыв сетки: 10 пикселей;
  Сетка-шаблон-направления:
    “коробка-1 коробка-2. коробка-3”
    «коробка-4 коробка-5. коробка-6»;
}
.box-1 {
  зона сетки: коробка-1;
}
.box-2 {
  площадь сетки: коробка-2;
}
.box-3 {
  площадь сетки: коробка-3;
}
.box-4 {
  площадь сетки: коробка-4;
}
.box-5 {
  площадь сетки: коробка-5;
}
.box-6 {
 площадь сетки: коробка-6;
}

Пустые области не обязательно должны образовывать столбец, они могут находиться где угодно в сетке.
Функция repeat ()
Вы также можете использовать блок fr вместе с повторение() функция для более простого синтаксиса. в этом нет необходимости, если у вас есть только простая сетка, но она может пригодиться, если вы хотите реализовать сложную компоновку, например, вложенную сетку.

.wrapper {
  дисплей: сетка;
  grid-template-columns: repeat (3, 1fr);
  / * grid-template-columns: 1fr 1fr 1fr; * /
  сетка-шаблон-строки: 200px;
  разрыв сетки: 10 пикселей;
}

Синтаксис повторения (3, 1fr) приводит к тому же макету, что и 1fr 1fr 1fr. Расположение ниже такое же, как в первом примере.
Если вы увеличите множитель внутри функции repeat (), у вас будет больше столбцов. Например, повторение (6, 1fr) приводит к шести равным столбцам. В этом случае все наши блоки будут в одной строке, что означает, что для свойства grid-template-row достаточно использовать только одно значение (200 пикселей).

.wrapper {
  дисплей: сетка;
  grid-template-columns: repeat (6, 1fr);
  сетка-шаблон-строки: 200px;
  разрыв сетки: 10 пикселей;
}

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

.wrapper {
  дисплей: сетка;
  grid-template-columns: repeat (3, 1fr) repeat (3, 2fr);
  сетка-шаблон-строки: 200px;
  разрыв сетки: 10 пикселей;
}

Вы также можете комбинировать repeat () с другими модулями CSS. Например, вы можете использовать 200px repeat (4, 1fr) 200px в качестве допустимого кода.

Если вас интересует, как создавать сложные макеты с помощью модуля CSS Grid, функция repeat () и блок fr Рэйчел Эндрю имеют интересное сообщение в блоге на как ты можешь это сделать,
Демо для экспериментов
Наконец, вот демо, которое я обещал. Он использует тот же код, что и первый пример в этой статье. Разветвитесь и посмотрите, чего вы можете достичь с помощью устройства fr.

Увидеть перо Демонстрация для начинающих и блоков CSS HONGKIAT (@hkdc) на CodePen,

Читайте также: Интеграция простых CSS Grid Layouts в WordPress