CSS grid-auto-flow — авторозміщення в ґріді

Властивість grid-auto-flow визначає, як працює алгоритм автоматичного розміщення, точно визначаючи, як будуть розміщені елементи у сітці.

Властивість grid-auto-flow

Властивість grid-auto-flow впливає лише на елементів у сітці, які розміщуються в неявно створених треках. Елементи сітки, які не розміщені безпосередньо у певному місці, розміщуються автоматично в незайнятому місці. Ця властивість визначає, як саме ці елементи мають бути розміщені.

Ключове слово dense може стати в нагоді, якщо у вашій сітці є елементи з різними розмірами. Як правило, сітка просто розмістить ці елементи у порядку їх розташування у коді. Якщо всі об'єкти сітці мають один і той же розмір, і вони вписуються в одну доріжку, це зазвичай призводить до рівномірно розподіленої сітці з елементами сітки.

Але якщо деякі елементи сітки більші за іншіі, то ви можете отримати сітку, в якій елементи переходять на наступний рядок, коли ще залишається немало вільного місця до кінці у цьому рядку, і сітка виглядає трохи "зубчасто" та негарно.

Ось приклад такої поведінки сітки:

Властивість grid-auto-flow

Два елементи (2 і 3) ширші за інші й тому роблять хаос у розміщенні. А якщо для сітки застосувати ключове слово dense:

Властивість grid-auto-flow

Пустий простір заповнюється маленькими елементами.

автор: Svitlana

Загальний опис

автор: NagarD

Синтаксис

grid-auto-flow: [ row | column ] || dense;

Властивість grid-auto-flow може отримувати 3 значень:

row

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

автор: Svitlana

column

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

автор: Svitlana

dense

Алгоритм автоматичного розміщення, який полягає на заповненні пустої клітинки раніше в сітці, якщо пізніше з'являться менші елементи.

автор: Svitlana

Значення без задання: row
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.gridAutoFlow

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
57 52 10.1 44 16 —
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
57 57 52 10.3

Приклади

+ запропонувати свій приклад у пісочниці

Простий приклад

HTML

<div class="box row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="box column">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="clear"></div>

<div class="note row">
  <pre><code>grid-auto-flow: <strong>row</strong>;</code></pre>
</div>
<div class="note column">
  <pre><code>grid-auto-flow: <strong>column</strong>;</code></pre>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.box {
  width: 50%;
  padding: 6px;
  display: grid;
  height: 175px;
  grid-auto-flow: row;
  grid-gap: 2px;
  float: left;
}

.box.column {
  grid-auto-flow: column;
  float: right;
}

.box > div {
  background-color: tomato;
}

.clear {
  clear: both;
}

.note {
  width: 50%;
  font-size: 18px;
  font-family: monospace;
  text-align: center;
  line-height: 5;
}

.note.row {
  float: left;
}

.note.column {
  float: right;
}
автор: Svitlana

Дві однакові сітки 2×2 — відрізняється лише напрямок заповнення: з row (типово) елементи йдуть уздовж ряду, з column — уздовж колонки. Слідкуй за порядком цифр.

HTML

<p>grid-auto-flow: row</p>
<div class="box row">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<p>grid-auto-flow: column</p>
<div class="box col">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

CSS

.box {
    display: grid;
    grid-template: repeat(2, 40px) / repeat(2, 1fr);
    gap: 4px;
}

.row { grid-auto-flow: row; }
.col { grid-auto-flow: column; }

.box div {
    background: #0172ad;
    color: #fff;
    padding: 8px;
}
автор: Svitlana

З dense

HTML

<div class="box">
  <div>1</div>
  <div class="big">2</div>
  <div class="big">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 4px;
  grid-auto-flow: dense;
}

.box > div {
  background-color: tomato;
  color: white;
  font-size: 1.5em;
  padding: 18px;
  width: 20vw;
  text-align: center;
  font-family: monospace;
}

.box > div.big {
  width: 40vw;
  grid-column-end: span 2;
}
автор: Svitlana

Без dense

HTML

<div class="box">
  <div>1</div>
  <div class="big">2</div>
  <div class="big">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 4px;
}

.box > div {
  background-color: tomato;
  color: white;
  font-size: 1.5em;
  padding: 18px;
  width: 20vw;
  text-align: center;
  font-family: monospace;
}

.box > div.big {
  width: 40vw;
  grid-column-end: span 2;
}
автор: Svitlana

Динамічний приклад

HTML

<p>Цей приклад показує як працює властивість <code>grid-auto-flow</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення сітки нижче.</p>

<p>У цьому прикладі, ми можемо змінювати розташування елементів у сітці.</p>

<div class="inputs">
  <input id="row" checked name="grid-auto-flow" type="radio"/>
  <label for="row">row</label>
  <message for="row">Алгоритм автоматичного розміщення, щоб заповнити кожен рядок по черзі, додаючи нові рядки за необхідності. </message>
  
  <input id="column" name="grid-auto-flow" type="radio"/>
  <label for="column">column</label>
  <message for="column">Алгоритм автоматичного розміщення, щоб по черзі заповнювати кожен стовпчик, при необхідності додаючи нові стовпці.</message>
  
  <input id="dense" name="grid-auto-flow" type="radio"/>
  <label for="dense">dense</label>
  <message for="dense">Алгоритм автоматичного р​озміщення, який полягає на заповненні пустої клітинки раніше в сітці, якщо пізніше з'являться менші елементи.</message>
</div>

<p id="message">Алгоритм автоматичного розміщення, щоб заповнити кожен рядок по черзі, додаючи нові рядки за необхідності. </p>

<hr>

<div class="box">
  <div>1</div>
  <div class="big">2</div>
  <div class="big">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 4px;
  grid-auto-flow: row;
}

.box > div {
  background-color: tomato;
  color: white;
  font-size: 1.5em;
  padding: 18px;
  width: 20vw;
  text-align: center;
  font-family: monospace;
}

.box > div.big {
  width: 40vw;
  grid-column-end: span 2;
}

message {
  display: none;
}

JS

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('grid-auto-flow', this.id));

}));
автор: Svitlana

Динамічний приклад

HTML

<div id="wrapper">
<div id="gridAutoFlow" class="radios">
<input type="radio" name="gridAutoFlow" value="row" checked> grid-auto-flow: row;<br>
<input type="radio" name="gridAutoFlow" value="row dense"> grid-auto-flow: row dense;<br>
<input type="radio" name="gridAutoFlow" value="column" > grid-auto-flow: column;<br>

<input type="radio" name="gridAutoFlow" value="column dense" > grid-auto-flow: column dense;<br>

</div>
<div id="cuadricula">
<div class="item" style="--color:#429b3e;"><p>1</p></div>   
<div class="item" style="--color:#429b3e;"><p>2</p></div>
<div class="item" style="--color:#429b3e;"><p>3</p></div>
<div class="item" style="--color:#429b3e;"><p>4</p></div>
<div class="item" style="--color:#429b3e;"><p>5</p></div>
<div class="item" style="--color:#429b3e;"><p>6</p></div>   
<div class="item" style="--color:#429b3e;"><p>7</p></div>
<div class="item" style="--color:#429b3e;"><p>8</p></div>
<div class="item" style="--color:#429b3e;"><p>9</p></div>
<div class="item" style="--color:#429b3e;"><p>10</p></div>
<div class="item" style="--color:#429b3e;"><p>11</p></div>     
</div>
</div>

CSS

#cuadricula {
  display: grid;
  grid-template-columns:repeat(5, minmax(auto,100px)); 
  grid-template-rows:repeat(auto-fill, 100px);
  margin:1em 0;
  border: 1px dashed red;
  grid-auto-flow: row;  /* or 'row dense', 'column', 'column dense' */
}
.item {
  padding: 1em;
  border-radius:10px;
  border: 1px solid #000; 
  background-color:#3E989B;
  background-color:var(--color);
  display:grid;
}

.item p {
  justify-self: center;
  align-self: center;
  color:white;
}
.item:nth-child(3n){grid-row-end:span 2;}
.item:nth-child(2n){grid-column-end:span 2;}



/*unimportant stuff*/
body {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 2em;
  color:#777;
  font-size: 18px;
}

#wrapper{width:50%;
  max-width:500px;
  min-width:270px;
  margin:1em auto;
}

JS

var radios = document.querySelector("#gridAutoFlow");
var grid = document.querySelector("#cuadricula");
radios.addEventListener("change", function (evt) {
  var val = evt.target.value;
  grid.style.gridAutoFlow = val;
}, false);
//# sourceURL=pen.js
автор: Svitlana

Два широкі елементи лишають дірки при типовому row; row dense підтягує наступні дрібні елементи назад і заповнює порожнечу — ціною того, що номери йдуть не по порядку.

HTML

<p>grid-auto-flow: row (типово)</p>
<div class="grid"><i>1</i><i class="wide">2</i><i class="wide">3</i><i>4</i><i>5</i><i>6</i></div>

<p>grid-auto-flow: row dense</p>
<div class="grid dense"><i>1</i><i class="wide">2</i><i class="wide">3</i><i>4</i><i>5</i><i>6</i></div>

CSS

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 1.5rem;
}

.dense {
    grid-auto-flow: row dense;
}

.grid i {
    padding: 1rem;
    font-style: normal;
    text-align: center;
    background: #5b7c99;
    color: #fff;
}

.wide {
    grid-column: span 3;
    background: #34495e;
}
автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід