«Алгоритм автоматического размещения» CSS grid-auto-flow

От автора: эта статья является частью серии «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 нет места, сначала проверяет, есть ли место выше, прежде чем переходить в другую строку.

Благодаря этому изменению алгоритма размещения элементов теперь таков, чтобы максимально плотно использовать все доступное пространство, что дает нам более эффективно заполненную сетку. Однако, в этом случае визуальный макет не обязательно отражает порядок исходного документа, что может не всегда быть приемлемым для пользователя.

Заключение

Напоминаю:

Автор: Ian Yates

Источник: https://webdesign.tutsplus.com/

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