CSS grid-auto-columns attribute


example

Set the default size of columns in the grid ::

.grid-container { display: grid ; grid-auto-columns: 50 px ; }

Give it a try »

Browser support

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

attribute
grid-auto-columns 57 16 52 10 44

Attribute definition and instructions

grid-auto-columns Property is used to set the default size of columns in the grid container .

This property only affects columns that are not sized .

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.gridAutoColumns="120px" Give it a try


Grammar

grid-auto-columns: auto|max-content|min-content|length;

Worth Describe
auto Default value . The size of the column is determined by the size of the container
fit-content() Equivalent to formula min(max-content, max(auto, argument)), be similar to auto The calculation of ( Namely minmax(auto, max-content))
max-content Set the size of each column according to the largest grid element in the column
min-content Set the size of each column according to the smallest grid element in the column
minmax(min.max) Set greater than or equal to min And less than or equal to max
length Use a custom length value to set the size of the column . Read about length units
% Use the percentage value to set the size of the column

Related articles

CSS course : CSS Grid layout

CSS Reference manual : grid-auto-row attribute