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

Алгоритм работы: 1

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

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