New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →


Defines the columns of a grid container. You can specify the width of a column by using a keyword (like auto) or a length (like 10px). The number of columns is determined by the number of values defined in the space-separated list.

default grid-template-columns: none;

No columns are defined, so you only have one.

grid-template-columns: auto auto auto;

You can use the keyword auto so that each column resizes itself automatically.

grid-template-columns: 80px auto 1rem;

You can mix the units.

grid-template-columns: 40px 1fr 2fr;

You can use the fr flex unit to distribute the remaining space across all flex columns.