От автора: эта статья является частью серии «CSS Grid Layout Module». В этом руководстве мы возьмем сетку из предыдущей статьи и используем ее в качестве площадки для экспериментов, чтобы подробнее изучить Grid. Мы улучшим то, как определяются зазоры, рассмотрим гибкие CSS столбцы и макеты, единицы измерения fr и представим функцию repeat().
Гибкие блоки
Весь смысл Grid заключается в том, чтобы позволить нам правильно управлять компоновкой в Интернете, поэтому давайте сделаем нашу статическую сетку гибкой. Если вы помните, мы определили сетку со столбцами, статически заданными в пикселях.
|
1 2 3 |
grid-template-columns: 150px 150px 150px; grid-template-rows: auto auto auto; grid-gap: 20px; |
Вполне допустимо использовать и другие единицы измерения, например em или rem. Или даже более необычные единицы, такие как vh и vmin. В нашем случае мы заменим пиксели на проценты.
|
1 |
grid-template-columns: 33.33% 33.33% 33.33%; |
Хм, это немного непривычно, но, похоже, это должно работать. Вы видите, что суммарная ширина столбцов теперь составляет примерно 100%; зазоры будут вычитаться из них автоматически. grid-gap задается, как в фиксированных, так и в гибких единицах измерения. Это означает, что мы можем идеально комбинировать гибкие столбцы и фиксированные зазоры без каких-либо сложных расчетов.
Повторения
Давайте напишем это, но более аккуратным способом, используя функцию repeat():
|
1 |
grid-template-columns: repeat(3, 33.33%); |
Это означает «повторить 33.33% три раза». И нам даже не нужно объявление grid-template-rows, поскольку в любом случае для него по умолчанию присваивается значение auto.
Единицы fr
Мы можем сделать еще одно последнее улучшение; мы введем единицы измерения fr или дробные единицы. В одной единице блоке fr описывается «одна часть из всех частей, на которые мы разделяем что-то». Например, мы можем объявить столбцы, используя:
|
1 |
grid-template-columns: 1fr 1fr 1fr; |
Здесь всего три единицы fr, поэтому каждый столбец будет шириной в одну треть сетки. Вот еще один пример:
|
1 |
grid-template-columns: 2fr 1fr 1fr |
Теперь в общей сложности у нас четыре единицы fr, поэтому первый столбец будет занимать половину доступной ширины, а остальные два столбца будут занимать по четверти.
Эти единицы действительно предоставляют нам много возможностей, особенно в сочетании с другими единицами измерения:
|
1 |
grid-template-columns: 300px 1fr 3fr 20%; |
Здесь мы объявили четыре столбца:
первый с фиксированной шириной в 300 пикселей
последний представляет собой гибкий столбец в 20% ширины контейнера сетки
затем вычисляются единицы fr, второй столбец будет занимать одну четвертую оставшегося пространства
а третий — три четвертых
Это выглядит так, здесь выделено автоматическое размещение, поскольку наши девять элементов изменяются, чтобы заполнить доступное пространство:
Но вернемся к нашей исходной сетке. Давайте заменим неуклюжее и неточное значение 33.33% на 1fr:
|
1 |
grid-template-columns: repeat(3, 1fr); |
Окончательная демо-версия:
Заключение
Итак, повторим:
Сетка принимает гибкие модули в сочетании с фиксированными.
Функция repeat() позволяет уменьшить таблицы стилей.
Единицы измерения fr или дробные единицы — очень мощный способ описания шаблонов сетки.
Мы проделали большую работу в этих двух руководствах, и теперь вы гордый обладатель очень аккуратной сетки! В следующей статье мы рассмотрим области сетки, ключевое слово span и некоторые практические примеры.
Автор: Ian Yates
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
