Как работает автоматическая расстановка элементов внутри грид-контейнера?

Автоматическая расстановка элементов внутри грид-контейнера работает благодаря свойству grid-auto-flow. html5book.ru doka.guide Оно управляет автоматическим размещением элементов сетки без явного положения. html5book.ru

Алгоритм работы: html5book.ru

1. Значение row (по умолчанию). html5book.ru Элементы размещаются, заполняя каждую строку по очереди слева направо и добавляя новые строки по мере необходимости. html5book.ru
2. Значение column. html5book.ru Элементы размещаются, заполняя каждый столбец по очереди сверху вниз и добавляя новые столбцы по мере необходимости. html5book.ru
3. Значение dense. html5book.ru Алгоритм «плотной» укладки элементов. html5book.ru При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами. html5book.ru

Для каждого элемента сетки браузер сканирует всю сетку в заданном направлении потока (строка или столбец), начиная от начальной точки потока (верхний левый угол), пока не найдёт место, куда поместится этот элемент сетки. html5book.ru