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

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

  • автор:

Свойство grid-auto-flow

Мы сделали так, чтобы карточка с классом huge занимала два ряда и две колонки. Из-за этого в первом ряду образовалась пустая ячейка. Так произошло потому, что в ряду осталось место только для одной колонки, а следующая карточка занимает две. В результате карточка перенеслась на новый ряд, а предыдущий ряд остался незаполненным.

Такое поведение можно изменить с помощью свойства grid-auto-flow . Оно управляет автозаполнением грид-контейнера.

.grid-container < display: grid; grid-auto-flow: row; >

Значение по умолчанию row говорит располагать элементы в том порядке, в котором они идут в разметке, и при необходимости создавать новые ряды:

3. Карточка, занимающая две колонки.

Но если указать значение dense , то контейнер будет заполняться так, чтобы не было пропусков:

3. Карточка, занимающая две колонки.

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

В нашем списке порядок карточек не имеет значения, но желательно заполнять ряды полностью. Чтобы этого добиться, добавим списку карточек свойство grid-auto-flow со значением dense . Затем изменим ширину страницы и понаблюдаем, как элементы меняются местами.

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

Перейти к заданию

  • index.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

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

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Related CSS properties: grid-auto-rows (en-US), grid-auto-columns (en-US), grid
  • Grid Layout Guide: Auto-placement in grid layout (en-US)
  • Video tutorial: Introducing Grid auto-placement and order

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

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

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