За что отвечает алгоритм dense html
Перейти к содержимому

За что отвечает алгоритм dense html

  • автор:

grid-auto-flow¶

Свойство grid-auto-flow управляет тем, как работает алгоритм автоматического размещения, точно указывая, как элементы попадают в сетку.

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

Демо¶

Grid Layout

  • grid
  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column
  • grid-column-end
  • grid-column-gap
  • grid-column-start
  • grid-gap
  • grid-row
  • grid-row-end
  • grid-row-gap
  • grid-row-start
  • grid-template
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11
/* Keyword values */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column dense; /* Global values */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: unset; 

Значения¶

Значение по-умолчанию: row

Применяется к grid контейнерам

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

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

алгоритм использует «плотный» алгоритм упаковки, который пытается заполнить дыры в сетке, если позже появятся более мелкие элементы. Это может привести к тому, что элементы появятся не по порядку, но при этом заполнят отверстия, оставленные более крупными элементами.

Спецификации¶

Поддержка браузерами¶

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Описание и примеры¶

Пример 1¶

1 2 3 4 5 6 7
div id="grid"> div id="item1">div> div id="item2">div> div id="item3">div> div id="item4">div> div id="item5">div> div> 
 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
#grid  height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ > #item1  background-color: lime; grid-row-start: 3; > #item2  background-color: yellow; > #item3  background-color: blue; > #item4  grid-column-start: 2; background-color: red; > #item5  background-color: aqua; > 

Пример 2¶

Рассмотрим следующий HTML:

1 2 3 4 5 6 7
section class="container"> div class="item-a">item-adiv> div class="item-b">item-bdiv> div class="item-c">item-cdiv> div class="item-d">item-ddiv> div class="item-e">item-ediv> section> 

Вы определили сетку с пятью колонками и двумя рядами, а свойство grid-auto-flow установили в row (оно же значение по умолчанию).

1 2 3 4 5 6
.container  display: grid; grid-template-columns: 60px 60px 60px 60px 60px; grid-template-rows: 30px 30px; grid-auto-flow: row; > 

При размещении элементов в сетке, вы указываете позиции только для двух из них:

1 2 3 4 5 6 7 8
.item-a  grid-column: 1; grid-row: 1 / 3; > .item-e  grid-column: 5; grid-row: 1 / 3; > 

Так как мы установили grid-auto-flow в row , наша сетка будет выглядеть как на изображении ниже. Обратите внимание на то, как три элемента которые мы не расположили (item-b, item-c и item-d) перетекают через пустые строки:

CSS Grid Auto Flow Row

Если вместо этого мы установим свойство grid-auto-flow в column , элементы item-b , item-c и item-d будут перетекать сквозь колонки:

1 2 3 4 5 6
.container  display: grid; grid-template-columns: 60px 60px 60px 60px 60px; grid-template-rows: 30px 30px; grid-auto-flow: column; > 

CSS Grid Auto Flow Column

См. также¶

grid — auto — flow

Этим свойством можно поставить грид-элементы на пустое место.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 11 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Если грид-элементов больше, чем явно объявленных колонок или рядов, то они автоматически размещаются внутри родителя. А вот каким образом — в ряд или в колонку — можно указать при помощи свойства grid — auto — flow .

Пример

Скопировать ссылку «Пример» Скопировано

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

 .container  display: grid; /* Три колонки */ grid-template-columns: auto auto auto; /* Два ряда */ grid-template-rows: auto auto; /* Автоматическое размещение в ряд */ grid-auto-flow: row; /* Отступы между ячейками */ gap: 20px;> .item3  /* Занимает один ряд и растягивается на две колонки */ grid-column: span 2;> .container  display: grid; /* Три колонки */ grid-template-columns: auto auto auto; /* Два ряда */ grid-template-rows: auto auto; /* Автоматическое размещение в ряд */ grid-auto-flow: row; /* Отступы между ячейками */ gap: 20px; > .item3  /* Занимает один ряд и растягивается на две колонки */ grid-column: span 2; >      

Пример реализации свойства grid-auto-flow со значением row.

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

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство grid — template — rows командует браузеру, во сколько рядов выстраивать вложенные элементы. И какого размера должны быть эти ряды.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

  • row (значение по умолчанию) — автоматически размещаемые элементы выстраиваются в ряды.
  • column — автоматически размещаемые элементы выстраиваются в колонки.
  • dense — браузер старается заполнить пустые ячейки в разметке, если размеры элементов позволяют. Можно сочетать с остальными значениями.

Для иллюстрации работы ключевого слова dense добавим его к значению свойства grid — auto — flow в примере выше:

 .container  /* Автоматическое размещение в ряд */ grid-auto-flow: row dense;> .container  /* Автоматическое размещение в ряд */ grid-auto-flow: row dense; >      

Пример реализации свойства grid-auto-flow со значением row dense.

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

Подсказки

Скопировать ссылку «Подсказки» Скопировано

Полный список свойств гридов можно посмотреть в гайде по grid.

  • Chrome 66, поддерживается 66
  • Edge 79, поддерживается 79
  • Firefox 76, поддерживается 76
  • Safari 12.1, поддерживается 12.1

grid-auto-flow

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020 .

CSS-свойство управляет поведением автоматически размещаемых элементов, точно указывая, как они попадают в сетку.

Интерактивный пример

Синтаксис

/* Ключевые слова */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column dense; /* Глобальные значения */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: unset; 

Свойство можно использовать в двух вариантах:

  • с одним ключевым значением: row , column , или dense .
  • с двумя значениями: row dense или column dense .

Значения

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

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

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

Formal syntax

grid-auto-flow =
[ (en-US) row | (en-US) column ] (en-US) || (en-US)
dense

Пример

HTML Content

div id="grid"> div id="item1">div> div id="item2">div> div id="item3">div> div id="item4">div> div id="item5">div> div> select id="direction" onchange="changeGridAutoFlow()"> option value="column">columnoption> option value="row">rowoption> select> input id="dense" type="checkbox" onchange="changeGridAutoFlow()" /> label for="dense">denselabel> 

CSS Content

#grid  height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ > #item1  background-color: lime; grid-row-start: 3; > #item2  background-color: yellow; > #item3  background-color: blue; > #item4  grid-column-start: 2; background-color: red; > #item5  background-color: aqua; > 
function changeGridAutoFlow()  var grid = document.getElementById("grid"); var direction = document.getElementById("direction"); var dense = document.getElementById("dense"); var gridAutoFlow = direction.value === "row" ? "row" : "column"; if (dense.checked)  gridAutoFlow += " dense"; > grid.style.gridAutoFlow = gridAutoFlow; > 

Спецификация

Specification
CSS Grid Layout Module Level 2
# grid-auto-flow-property
Начальное значение row
Применяется к сеточные контейнеры
Наследуется нет
Обработка значения как указано
Animation type discrete

Золотая рыбка CSS3 Grid Layout (часть 3)

Благодаря нашим недавним погружениям в волшебный мир этого модуля, мы уже смогли прочувствовать его силу и невероятные возможности, которыми он наделён. Но, несмотря на множество примеров и описаний разделов CSS Grid Layout Module Level 1, есть ещё немало сюрпризов, о которых стоит поговорить. Поэтому, как вы уже догадались, в этой статье мы продолжим прогулку по этой спецификации, ведь золотая рыбка задолжала нам ещё желания;)

Кстати, так совпало, что параллельно с нами Эмиль Бьёрклунд также ведёт свою серию статей, посвящённую спецификации Grid Layout. Поэтому, чтобы лучше прояснить для себя механизм этой раскладки, мы настоятельно рекомендуем ознакомиться со статьями Эмиля. Для этого можно пройти к нему в гости, либо прочитать перевод у нас на сайте.

Повторение колонок и рядов с функцией repeat()

Вы наверняка знаете свойство background-repeat , которое отвечает за повторение фоновой картинки в элементе. Вот и в модуле Grid Layout есть нечто похожее, но только для повторения колонок/рядов.

Представляю вам функцию repeat() , при помощи которой можно создать повторяющийся паттерн для построения колонок/рядов, описанный в компактной форме.

Например, возьмём CSS-код из спецификации:

.grid

Обратите внимание на повторяющиеся названия именованных линий, которые находятся в разных скобках. Как вы поняли, так тоже можно делать. Чуть позже в этой статье мы разберём примеры того, где это может пригодится, а пока вернёмся к repeat() .

При помощи repeat() то же самое CSS-объявление выглядит так:

.grid < display: grid; /* то же самое объявление с repeat() */ grid-template-columns: repeat (4, 10px [col-start] 250px [col-end]) 10px; >

Намного короче, неправда ли? Но давайте разберёмся. Я не стану приводить скриншоты, поскольку здесь достаточно простого объяснения, как работает эта функция. Первый аргумент в repeat() , это число повторений паттерна. В нашем случае паттерн будет повторяться 4 раза. Далее мы уже описываем сам паттерн: величину колонок, именованные линии и т.д. Всё просто. Очевидно, что эта функция очень полезна при большом количестве ячеек. И также не забывайте, что repeat() легко можно использовать и для построения рядов в свойстве grid-template-rows.

Обращение к полосам

По умолчанию грид-элементы распределяются по сетке в обычном порядке, как они идут в разметке. Но что если нам нужно раскидать блоки по конкретным колонкам/рядам? Grid Layout позаботился и об этом, предоставив пару способов. Рассмотрим каждый из них.

Способ с уникальными названиями грид-линий

Ранее (в этой и предыдущих статьях) мы уже научились создавать сетки разными методами, например, при помощи уникальных названий грид-линий. Поэтому в ниже представленной разметке и стилях вы не увидите ничего эдакого.

 
1
2
3
4
5
6

.unique-line-names

Мы воспользовались свойством grid-template-columns , чтобы создать сетку, состоящую из девяти колонок (четыре широких по 100px в ширину и пять узких по 10px). Нечто подобное мы проделывали здесь, только в нашем случае ширина первой колонки (а значит расстояние между началом первой и второй линией) будет 10px, второй (между [col1-start] и [col1-end]) — 100px, третьей — 10px и т.д.

В нашем грид-контейнере находится шесть грид-элементов. Представим, что нам нужно поместить в первую, третью и четвёртую широкие колонки по два блока, а вторую широкую колонку (и соответственно остальные узкие по 10px) пропустить. Для этого нам нужен такой CSS:

.unique-line-names > div:nth-child(3n + 1) < grid-column: col1-start; >.unique-line-names > div:nth-child(3n + 2) < grid-column: col3-start; >.unique-line-names > div:nth-child(3n)

2015-10-10_1728

Я специально сделал границу, чтобы было видно пустые колонки (ячейки грида). Элементы находятся во второй, в шестой и в восьмой колонках, а остальные колонки пустуют. Как вы, возможно, догадались из CSS-кода, произошло это потому, что с помощью свойства grid-column мы обратились к нужным нам колонкам по уникальными именам их границ ( [col1-start] , [col3-start] , [col4-start] ), приказав, например, первому и четвёртому элементам ( div:nth-child(3n + 1) ) оказаться в колонке, начинающейся от линии col1-start .

Способ с одинаковыми названиями грид-линий

Только что благодаря уникальным именам грид-линий мы легко раскидали элементы по нужным колонкам. Но что делать, если названия грид-линий не уникальны? Но и в этом случае Grid Layout нас не подвёл!

В HTML поменяем только класс у грид-контейнера.

 
1
2
3
4
5
6

А в CSS уберём цифры из названий линий, сделав их одинаковыми:

.same-line-names

Мы заменили все col*-start на просто col-start , проделав тоже самое и с col*-end . И теперь при этом нам нужно получить такой же результат, что и в предыдущем примере. Как это сделать? Да легко. Мы просто обратимся к грид-линиям по номерам:

.same-line-names > div:nth-child(3n + 1) < grid-column: col-start 1; >.same-line-names > div:nth-child(3n + 2) < grid-column: col-start 3; >.same-line-names > div:nth-child(3n)

И вот результат. Знакомый, не правда ли?

2015-10-10_17281

Это напоминает массив, только номера начинаются с цифры 1, а не с цифры 0, как мы привыкли. В свойстве grid-template-columns четыре линии col-start , следовательно к первой можно обратиться col-start 1 , ко второй col-start 2 , и т.д. Понятно, что, например, col-start 1 будет равнозначна col1-start из предыдущего примера. Поэтому, чтобы заставить первый и четвёртый элементы ( div:nth-child(3n + 1) ) занять вторую колонку, мы просто присвоили их свойству grid-column значение col-start с номером 1 .

Автоматическое размещение

Согласно автоматическому алгоритму размещения Grid Layout, грид-элементы выкладываются по сетке в грид-контейнере друг за другом, заполняя собой свободное пространство. Если, например, грид-элементу не хватает места в первом ряду, то он автоматически переходит на второй ряд. Вся прелесть здесь в том, что Grid Layout позволяет нам взять алгоритм автозразмещения под свой контроль! Это напоминает свойство flex-direction в Flexbox, только круче и в контексте Grid Layout.

Давайте рассмотрим это сразу на примерах, начав с простых и закончив более сложным из спецификации.

Для начала воспользуемся уже знакомыми нам свойствами grid-template-columns и grid-template-rows и создадим грид-сетку 3х3, где колонки будут занимать по 200px, а ряды — по 100px. Элементов при этом будет семь, поскольку так нагляднее для понимания алгоритма.

 
1
2
3
4
5
6
7

.grid < display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px 100px; >.grid div

grid1

Здесь всё вроде бы ясно, поэтому пора познакомиться с новым свойством grid-auto-flow , которое как раз и отвечает за алгоритм размещения грид-элементов по сетке. У этого свойства есть два значения: row , column , плюс к каждому из них может добавляться ещё одно волшебное значение dense. Последнее ( dense ) мы обсудим чуть позже, а пока посмотрим, как ведёт себя алгоритм без него. Первое значение rows (значение по умолчанию) приказывает элементам выстраиваться слева направо, идя по рядам, заполняя каждую грид-ячейку. Такое поведение можно наблюдать на рисунке выше.

А сейчас давайте поменяем значение свойства grid-auto-flow с row на column .

.grid < display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px 100px; /*меняет поведение алгоритма с row с на column*/ grid-auto-flow: column; >

grid2

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

А теперь перейдём к самому страшному более сложному примеру из спецификации, чтобы увидеть всю прелесть значения dense .

Представим, что у нас есть форма с полями, метками и отдельным блоком (на место расположение которого, кстати, стоит обратить особое внимание, см. блок #department-block ) с выпадающим списком внутри, ну и блок с кнопками.

 

Наша задача раскидать метки, поля и отдельный блок по своим колонкам (всего три колонки), а блоку с кнопками отвести отдельный ряд в самом низу.

form < display: grid; grid-template-columns: [labels] auto [controls] auto [oversized] auto; >form > label < grid-column: labels; grid-row: auto; >form > input, form > select < grid-column: controls; grid-row: auto; >#department-block < grid-column: oversized; grid-row: span 3; >#buttons < grid-row: auto; grid-column: 1 / -1; text-align: center; >

Я немного упростил пример и переделал картинку из спецификации, чтобы было наглядно понятно, что происходит

grid3-1

Для начала давайте разберёмся, что вообще происходит. В этом примере собрано множество грид-механизмов, с которыми мы уже знакомы. Например, взять вот это объявление:

grid-template-columns: [labels] auto [controls] auto [oversized] auto;

Мы уже проделывали подобный трюк в этой статье (см. раздел «Способ с уникальными названиями грид-линий»), где давали уникальные названия грид-линиям, чтобы потом разбросать нужные элементы по «именованным колонкам». Единственное отличие здесь в том, что расстояние между линиями (колонками) не фиксированное (auto), поэтому ширина колонок определяется шириной элементов.

Дальше у нас идут такие блоки объявлений:

form > label < grid-column: labels; grid-row: auto; >form > input < grid-column: controls; grid-row: auto; >#department-block

Свойство grid-column нам также знакомо, поэтому вы уже наверное догадались, что для меток (label) у нас отведена первая колонка, для полей — вторая, а для блока #department-block — третья.

Здесь стоит отметить несколько важных моментов. У свойства grid-row меток и полей стоит значение auto , поэтому ряды будут заполняться по мере необходимости. С этим всё понятно, но о чём нам говорит значение span 3 у свойства grid-row блока #department-block ? О том, что блок #department-block будет занимать три ряда (span 3).

А вот в каком ряду будет располагаться #department-block , нам расскажет наше загадочное значение dense .

Без dense алгоритм может «переть» только вперед, не оглядываясь назад. Поскольку метки и поля могут находиться только в своих выделенных колонках, то при их размещении алгоритм вынужден опускаться всё ниже и ниже. Когда он доходит до блока #department-block , алгоритм находится на 6 ряду — столько перед ним было меток и полей — и этот блок продолжает этот же 6 ряд.

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

form < display: grid; grid-template-columns: [labels] auto [controls] auto [oversized] auto; /* волшебное значение dense*/ grid-auto-flow: dense;

grid-layout-css3

Как видно на рисунке, блоку #department-block больше не приходится опускаться вниз и ждать своей очереди, чтобы занять свой ряд. Благодаря dense алгоритм теперь учитывает пропущенные строки и размещает #department-block сразу же в первой строке его ряда.

  • Золотая рыбка CSS3 Grid Layout (часть 1)
  • Золотая рыбка CSS3 Grid Layout (часть 2)
P.S. Это тоже может быть интересно:
  • Укрощаем режимы наложения: difference и exclusion
  • Голограммы, пленочные засветки и шейдеры на чистом CSS
  • CSS-выражения от контейнера для дизайнеров

Если вам понравилась статья, поделитесь ей!

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

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