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

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

От автора: эта статья является частью серии «CSS Grid Layout». В одном из наших ранних руководств по реализации CSS Grid мы рассмотрели гибкие столбцы и улучшенные зазоры. Мы узнали, что нам не нужно точно указывать, где мы хотим разместить элементы сетки; если мы объявим свойства сетки, Grid поместит наши элементы в соответствии с алгоритмом автоматического размещения. Это делается с помощью CSS Grid auto-flow. В этом руководстве мы рассмотрим, как этот алгоритм работает и как мы можем влиять на это.

Настройка

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

Все начинается с сетки

Ниже приводится демонстрационная сетка, в которой реализованы простые вещи; это контейнер, который мы объявили как display: grid;, он содержит восемнадцать дочерних элементов. Мы объявили, что он должен состоять из пяти столбцов, каждый из которых имеет равную ширину, по крайней мере такое же количество строк и узкий зазор вокруг ячеек в 2 пикселя.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Таким образом, вы можете видеть, что Grid взял наши восемнадцать элементов и разместил их, начиная с левого верхнего угла, двигаясь вправо, а затем вниз. Такое поведение очень похоже на то, как работает float.

Примечание: Поведение слева направо было бы отменено, если бы мы имели дело с direction: RTL; макетом.

В дело вступает расширение

Сейчас все хорошо и аккуратно, но давайте посмотрим, что произойдет, когда наши элементы не будут такими идеальными. Мы добавим для .item-7 несколько правил, чтобы увеличить его охват на два столбца и две строки:

Как теперь это выглядит?

Неплохо! .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, если захотим, но это полностью изменит нашу сетку:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Плотность имеет значение

Мы можем добавить другое ключевое слово в свойство grid-auto-flow, и это, возможно, мое любимое ключевое слово CSS на сегодняшний день: dense. Противоположное ему ключевое слово sparse (мое второе любимое) — это значение по умолчанию. Давайте сделаем следующее:

Примечание: нам не нужно включать здесь row, это подразумевается, но это подчеркивает, как работает синтаксис.

Теперь наш друг .item-10, обнаружив, что рядом с .item-9 нет места, сначала проверяет, есть ли место выше, прежде чем переходить в другую строку.

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

Заключение

Напоминаю:

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

Если в текущей строке нет доступного слота, он начнет поиск со следующей строки, даже если при этом возникают пробелы.

Мы можем изменить этот порядок поиска, изменив значение для grid-auto-flow с row на colum.

grid-auto-flow принимает ключевое слово для описания подхода к «плотности размещения». По умолчанию это значение sparse, но мы можем изменить его на dense, чтобы максимально плотно заполнить все доступное пространство.

Автор: Ian Yates

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree