grid-template-columns

grid-template-columns defines the sizes and optional line names of a grid’s explicit columns. Put it on the grid container, not on the items.

Share space between two columns

These tracks share available space in a 1:2 ratio after the gap is removed. The zero minimum avoids a content-based minimum changing this simple comparison.

<div class="layout">
  <div>One share</div>
  <div>Two shares</div>
</div>

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.5rem;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Fit cards into the available width

Auto-fit creates as many 10rem-minimum columns as fit, collapses empty ones, and lets filled columns expand. The nested min allows a single column to fit a container narrower than 10rem.

<div class="layout">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.5rem;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Values and intrinsic minimums

The initial value is none and the property is not inherited. None defines no explicit columns through this property; areas or implicit placement can still establish columns. Track lists accept lengths, percentages, fractions, intrinsic keywords, minmax(), fit-content(), repeat(), and named lines.

A bare 1fr has an automatic minimum. Long unbreakable content can make it wider than expected; minmax(0,1fr) permits a smaller track, and wrapping or scrolling keeps content usable. Fraction ratios describe flexible allocation, not an unconditional ratio of every final column width.

Percentages and newer values

Column percentages use the grid container’s inline size. Percentage columns totaling 100% can overflow when gaps are added. Prefer fractions when the intended division should account for gaps.

Subgrid uses the spanned parent tracks and has a different support history from basic Grid. Experimental layout values require their own checks. Learn grid-column for placement and overflow-wrap for long content.

Sources and browser support

MDN: grid-template-columns describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

CSS Grid specification defines track sizing, shorthand resets, and placement.