grid-template-columns CSS Property

The grid-template-columns property defines the grid columns — explicit sizes, fr (fraction), repeat(), minmax(), and line names in square brackets [name].

.grid { grid-template-columns: 1fr 2fr 1fr; }

.grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

min:0 max:9999 step:10

units:fr | px | % | em | rem

noneThe default value. No explicit columns — auto columns.

autoAuto-sized column based on content.

min-contentMinimum content size.

max-contentMaximum content size.

subgridAdopts the parent's track lines (CSS Grid 2).

masonryMasonry layout (experimental).

repeat()repeat(N, ) — repeat.

minmax()minmax(min, max) — size range.

fit-content()Fits content up to a limit.

CSS Grid Layout Module Level 2

Editor's Draft

<length-percentage>

W3C MDN

Show all code

Edit CSS online

The plugin that remembers hundreds of CSS items for you

Every CSS property — in a live demonstration

The bilingual CSS reference

previous next