---
layout: single
property_name: grid-template-columns
---
Defines the columns of a grid container. You can specify the width of a column by using a keyword (like
No columns are defined, so you only have one.
You can use the keyword
You can mix the units.
You can use the
#grid-template-columns
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;
grid-template-columns: auto auto auto;
auto so that each column resizes itself automatically.grid-template-columns: 80px auto 1rem;
grid-template-columns: 40px 1fr 2fr;
fr flex unit to distribute the remaining space across all flex columns.