CSS grid-auto-flow attribute


example

Insert grid elements column by column :

.grid-container { display: grid ; grid-auto-flow: column ; }

Give it a try »

Browser support

The number in the table indicates the first browser version number that supports this attribute .

attribute
grid-auto-flow 57 16 52 10 44

Attribute definition and instructions

grid-auto-flow Property specifies how the auto layout algorithm works , Specify exactly how the elements that are automatically laid out in the grid are arranged .

Default value : auto
inherit : no
Animation : support . Read about animatable Give it a try
Version: CSS Grid layout module Level 1
JavaScript Grammar : object.style.gridAutoFlow="row dense" Give it a try


Grammar

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

Worth Describe
row Default value . Place grid elements by filling each row , Add new columns if necessary .
column Place grid elements by filling each column , Add new columns if necessary .
dense This keyword specifies that the automatic layout algorithm uses a " dense " Stacking algorithm , If a smaller element appears later , Will try to fill the blank left in the front of the grid . This will fill in the blanks left by the slightly larger elements , But at the same time, it may also cause the original order to be disturbed .
row dense Fill the front blank in the grid by row
column dense Fill the front blank in the grid by column

example

Fill the front blank in the grid by row :

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

Give it a try »

Related articles

CSS course : CSS Grid layout