Руководство по CSS Grid Layout Fr Unit
Модуль CSS Grid Layout был отправлен с новый модуль CSS называется фр единица измерения. Как можно проще, фр это сокращение слова “доля”. Новый блок позволяет быстро нарезать сетку на пропорциональные столбцы или строки. В результате создание полностью адаптивные и гибкие сетки становится почти бризом.
Поскольку единица дроби была введена вместе с модулем Grid Layout, вы можете использовать его в любом браузере, который поддерживает сетку CSS. Если вы также хотите поддерживать старые браузеры, вот отличный CSS сетка полифилл что позволяет использовать не только фр блок, но и другие особенности сетки.
Основное использование
Во-первых, давайте посмотрим на основная сетка который использует единицу дроби. Схема ниже делит пространство на три столбца одинаковой ширины а также два ряда одинаковой высоты.
Принадлежащий HTML сделан из шесть дел отмечен .коробка учебный класс, внутри .обертка ДИВ.
1.2.3.4.5.6.
Чтобы использовать модуль Grid Layout, вам нужно добавить дисплей: сетка; CSS свойство для оболочки. Сетка-шаблон-столбцы свойство использует фр единица как значение; соотношение трех столбцов составляет 1: 1: 1.
Для строк сетки (Сетка-шаблон-строк собственность), я не использовал фр блок, так как это имеет смысл, только если обертка имеет фиксированную высоту. В противном случае это может привести к странным результатам на некоторых устройствах, однако даже тогда фр единица измерения поддерживает соотношение (и это огромно).
Сетка зазора имущество добавляет сетку 10 пикселей между ящиками. Если вы не хотите разрыв, просто удалите это свойство.
.обертка дисплей: сетка; grid-template-columns: 1fr 1fr 1fr; сетка-шаблон-строки: 200px 200px; разрыв сетки: 10 пикселей; .box цвет: белый; выравнивание текста: по центру; размер шрифта: 30 пикселей; отступы: 25 пикселей;
Обратите внимание, что приведенный выше CSS не содержит базовых стилей, таких как фоновые цвета. Вы можете найти полный код в демоверсии в конце статьи.
Коэффициент изменения
Конечно, вы не можете использовать только 1: 1: 1, но любое соотношение вы хотите. Ниже я использовал Фракции 1: 2: 1 которые также делят пространство на три колонны но средний столбец будет в два раза шире как два других.
Я также увеличил ценность Сетка зазора так что вы можете увидеть, как он меняет макет. В основном браузер вычитает разрыв сетки из ширины области просмотра (в этом примере разрывы сетки составляют до 80 пикселей), и нарезает остальное согласно данным фракциям.
.обертка дисплей: сетка; grid-template-columns: 1fr 2fr 1fr; сетка-шаблон-строки: 200px 200px; разрыв сетки: 40 пикселей;
скомбинировать фр с другими модулями CSS
Вы можете скомбинировать фр блок с любые другие модули CSS также. Например, в приведенном ниже примере я использовал 60% 1fr 2fr соотношение для моей сетки.
Так как же это работает? браузер назначает 60% ширины области просмотра к первому столбцу. Затем он делит остальное пространство на доли 1: 2.
То же самое можно также записать как 60% 13,33333% 26,66667%. Но, честно говоря, зачем кому-то использовать этот формат? Огромное преимущество дробной единицы в том, что она улучшает читаемость кода. Более того, это совершенно точно, в процентном формате до 99,9999%.
.обертка дисплей: сетка; grid-template-columns: 60% 1fr 2fr; сетка-шаблон-строки: 200px 200px; разрыв сетки: 10 пикселей;
Помимо процентов, Вы также можете использовать другие модули CSS вместе с единицей дроби, например пт, ПВ, Эм, а также рем.
Добавить пробел с фр
Что делать, если вы не хотите, чтобы ваш дизайн был загроможден и добавить пробел к вашей сетке? Единица фракции также имеет простое решение для этого.
Как видите, эта сетка имеет пустой столбец пока он все еще сохраняет все шесть коробок. Для этого макета нам нужно разделить пространство вверх на четыре колонки вместо трех. Итак, мы используем 1fr 1fr 1fr 1fr значение для Сетка-шаблон-столбцы имущество.
Добавляем пустой столбец внутри Сетка-шаблон-зона собственности, используя точечная запись. По сути, это свойство позволяет ссылка на именованные области сетки. И вы можете назвать области сетки с помощью Сетка-зона свойство, которое вам нужно использовать отдельно для каждой области.
.обертка дисплей: сетка; grid-template-columns: 1fr 1fr 1fr 1fr; сетка-шаблон-строки: 200px 200px; разрыв сетки: 10 пикселей; grid-template-area: «коробка-1, коробка-2. коробка-3», «коробка-4, коробка-5. коробка-6»; .box-1 grid-area: box-1; .box-2 grid-area: box-2; .box-3 grid-area: box-3; .box-4 grid-area: box-4; .box-5 grid-area: box-5; .box-6 grid-area: box-6;
Пустые области не обязательно формировать столбец, Oни может быть где угодно в сетке.
повторение() функция
Вы также можете использовать фр единица измерения вместе с повторение() функция для более простой синтаксис. , в этом нет необходимости, если у вас есть только простая сетка, но она может пригодиться, если вы хотите реализовать сложный макет, например вложенная сетка.
.обертка дисплей: сетка; grid-template-columns: repeat (3, 1fr); / * grid-template-columns: 1fr 1fr 1fr; * / grid-template-row: 200px; разрыв сетки: 10 пикселей;
повторить (3, 1fr) синтаксис результаты в том же макете как 1fr 1fr 1fr. Расположение ниже такое же, как в первом примере.
если ты увеличить множитель внутри повторение() Функция у вас будет больше столбцов. Например, повторить (6, 1fr) результаты в шесть равных столбцов. В этом случае все наши коробки будет в том же ряду, Это означает, что достаточно использовать только одно значение (200 пикселей) для Сетка-шаблон-строк имущество.
.обертка дисплей: сетка; grid-template-columns: repeat (6, 1fr); сетка-шаблон-строки: 200px; разрыв сетки: 10 пикселей;
Ты можешь использовать повторение() больше чем единожды. Например, следующий пример приводит к сетке, в которой последние три столбца в два раза шире как первые три.
.обертка дисплей: сетка; grid-template-columns: repeat (3, 1fr) repeat (3, 2fr); сетка-шаблон-строки: 200px; разрыв сетки: 10 пикселей;
Вы также можете скомбинировать повторение() с другими модулями CSS. Например, вы можете использовать 200px repeat (4, 1fr) 200px как действительный код.
Если вы заинтересованы в том, как создавать сложные макеты с модулем CSS Grid, повторение() функция и фр Блок Рэйчел Эндрю имеет интересную запись в блоге о том, как вы можете сделать это.
Демо для экспериментов
в заключение, вот демо я обещал. Он использует тот же код, что и первый пример в этой статье. Развейте это, и посмотрите, что вы можете достичь с фр единица измерения.
