grid-template CSS Property

The grid-template shorthand sets grid-template-rows, grid-template-columns, and grid-template-areas — i.e. the entire explicit grid. Supports an "ASCII art" syntax aligning track sizes inline with area names.

.grid { grid-template: auto 1fr / auto 1fr auto; }

.layout { grid-template: "head head" 60px "nav main" 1fr "foot foot" 40px / 200px 1fr; }

noneAll three longhands reset to their initial values (default).

min-contentTrack size is the minimum size required by the content.

max-contentTrack size is the maximum size the content needs without wrapping.

CSS Grid Layout Module Level 2

Editor's Draft

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