loader

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

grid-auto-flow հատկությունը վերահսկում է ավտոմատ տեղադրված տարրերի վարքը՝ հստակ նշելով, թե ինչպես են դրանք տեղավորվում ցանցում: Եթե ​​դուք ունեք տարրեր, որոնք ակնհայտորեն չեք տեղադրում ցանցի վրա, ակտիվանում է ավտոմատ տեղադրման ալգորիթմն, որը դրանք ավտոմատ կերպով տեղադրում է grid-տարածքի մեջ: Այս հատկությունը վերահսկում է, թե ինչպես է աշխատում ավտոմատ տեղադրման ալգորիթմը:

Синтаксис

Գրելաձև
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: row; ⟿ Հերթով լրացնում է յուրաքանչյուր տող և ըստ անհրաժեշտության ավելացնում է նոր տողեր.
grid-auto-flow: column; ⟿ Հերթով լրացնում է յուրաքանչյուր սյունակ և անհրաժեշտության դեպքում ավելացնում նոր սյունակներ.
grid-auto-flow: dense; ⟿ Ցանցի ազատ տարածությունը լրացնում է տարրերով.
grid-auto-flow: row dense; ⟿ Հերթով լրացնում է յուրաքանչյուր շարքը և լրացնում է ցանցի ազատ տարածությունը տարրերով.
grid-auto-flow: column dense; ⟿ Հերթով լրացնում է յուրաքանչյուր սյունակ և լրացնում է ցանցի ազատ տարածությունը տարրերով.

Пример

Օրինակ

See the Pen grid-auto-flow by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

 wbr image

Также у тега grid есть следующие под. теги
Поддержка браузера дляԲրաուզերի աջակցությունը grid-auto-flow элемента տարրին
Browser IE Edge Chrome Firefox Safari Opera
Version 6+ 16+ 57+ 52+ 10.1+ 44+
Notes