От автора: эта статья является частью серии «CSS Grid Layout». В одном из наших ранних руководств по реализации CSS Grid мы рассмотрели гибкие столбцы и улучшенные зазоры. Мы узнали, что нам не нужно точно указывать, где мы хотим разместить элементы сетки; если мы объявим свойства сетки, Grid поместит наши элементы в соответствии с алгоритмом автоматического размещения. Это делается с помощью CSS Grid auto-flow. В этом руководстве мы рассмотрим, как этот алгоритм работает и как мы можем влиять на это.
Настройка
Если ваш браузер не настроен на поддержку Grid, вам нужно будет разобраться с этим. Прочитай статью: CSS Grid Layout: С чего начать.
Все начинается с сетки
Ниже приводится демонстрационная сетка, в которой реализованы простые вещи; это контейнер, который мы объявили как display: grid;, он содержит восемнадцать дочерних элементов. Мы объявили, что он должен состоять из пяти столбцов, каждый из которых имеет равную ширину, по крайней мере такое же количество строк и узкий зазор вокруг ячеек в 2 пикселя.
grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); grid-gap: 2px;
Таким образом, вы можете видеть, что Grid взял наши восемнадцать элементов и разместил их, начиная с левого верхнего угла, двигаясь вправо, а затем вниз. Такое поведение очень похоже на то, как работает float.
Примечание: Поведение слева направо было бы отменено, если бы мы имели дело с direction: RTL; макетом.
В дело вступает расширение
Сейчас все хорошо и аккуратно, но давайте посмотрим, что произойдет, когда наши элементы не будут такими идеальными. Мы добавим для .item-7 несколько правил, чтобы увеличить его охват на два столбца и две строки:
.item-7 { background: #e03f3f; grid-column: span 2; grid-row: span 2;
}
Как теперь это выглядит?
Неплохо! .item-7 занимает больше места, поэтому .item-8 и .item-9 смещаются дальше. Затем .item-10 смотрит, есть ли свободное место рядом с .item-9, и когда видит, что нет, он перемещается вниз по строке и в левый угол. Остальные элементы продолжают размещаться так же. Но подождите, что будет, если мы сделаем .item-9 также немного больше?
Теперь все становится интересно; .item-9 больше не вписывается в столбец в конце, поэтому он сдвигается на следующую строку. Поскольку в начале строки он не может поместиться так, чтобы не сместить .item-7, поэтому он перемещается дальше. .item-10, также сдвигается и размещается под .item-6, но, если вы помните, он должен найти свободный столбец, и если не находит его смещается на строку вниз и снова начинает с левого угла. Это важная концепция.
Приветствуем grid-auto-flow
Если вы посмотрите на предыдущую демо-версию, то увидите, что .item-18, не найдя места рядом с .item-17, переместился вниз. Мы сами определили только пять строк, но Grid предположил, что нужна еще одна строка. Это связано со значением grid-auto-flow, которое присвоено элементу сетки, а значение по умолчанию для этого свойства — row. Мы можем изменить это значение на column, если захотим, но это полностью изменит нашу сетку:
Это похоже на предыдущую сетку, но вы заметите, что теперь наши элементы начинаются в левом верхнем углу, затем перемещаются вниз, чтобы заполнить каждую строку в столбце, затем перемещаются ко второму столбцу и так далее. Итак, теперь, когда элемент слишком большой, следующий элемент ищет следующее свободное пространство в строке, и, не найдя его, переходит к следующему столбцу.
Плотность имеет значение
Мы можем добавить другое ключевое слово в свойство grid-auto-flow, и это, возможно, мое любимое ключевое слово CSS на сегодняшний день: dense. Противоположное ему ключевое слово sparse (мое второе любимое) — это значение по умолчанию. Давайте сделаем следующее:
grid-auto-flow: row dense;
Примечание: нам не нужно включать здесь row, это подразумевается, но это подчеркивает, как работает синтаксис.
Теперь наш друг .item-10, обнаружив, что рядом с .item-9 нет места, сначала проверяет, есть ли место выше, прежде чем переходить в другую строку.
Благодаря этому изменению алгоритма размещения элементов теперь таков, чтобы максимально плотно использовать все доступное пространство, что дает нам более эффективно заполненную сетку. Однако, в этом случае визуальный макет не обязательно отражает порядок исходного документа, что может не всегда быть приемлемым для пользователя.
Заключение
Напоминаю:
Если мы специально не определили местоположение элемента, алгоритм автоматического размещения Grid поместит его в следующий доступный (и достаточно большой) слот.
Если в текущей строке нет доступного слота, он начнет поиск со следующей строки, даже если при этом возникают пробелы.
Мы можем изменить этот порядок поиска, изменив значение для grid-auto-flow с row на colum.
grid-auto-flow принимает ключевое слово для описания подхода к «плотности размещения». По умолчанию это значение sparse, но мы можем изменить его на dense, чтобы максимально плотно заполнить все доступное пространство.
Автор: Ian Yates
Источник: https://webdesign.tutsplus.com/
Редакция: Команда webformyself.
