grid-template-columns
Define explicit column sizes, fractions and content minimums.
Overview
| Class | Declarations |
|---|---|
grid-template-columns:none | grid-template-columns: none;
|
grid-template-columns:min-content | grid-template-columns: min-content;
|
grid-template-columns:max-content | grid-template-columns: max-content;
|
grid-template-columns:96px|1fr|72px | grid-template-columns: 96px 1fr 72px;
|
grid-template-columns:repeat(3,1fr) | grid-template-columns: repeat(3,1fr);
|
grid-template-columns:fit-content(12rem) | grid-template-columns: fit-content(12rem);
|
grid-template-columns:minmax(0,1fr)|2fr | grid-template-columns: minmax(0,1fr) 2fr;
|
Basic usage
Define explicit columns
grid-template-columns defines the explicit column track list. This example reserves 64px and 48px for the outer tracks; 1fr receives the remaining 136px after the two 16px gaps in a 280px container.
<div id="layout" class="grid grid-auto-rows:64px grid-template-columns:64px|1fr|48px gap-md w:17.5rem max-w:100%"> <div id="peer" class="p-sm">A</div> <div id="target" class="p-sm">1fr</div> <div id="item-3" class="p-sm">C</div></div>The track list alone does not enable Grid; include grid on the parent. Additional rows reuse these columns. fr divides remaining space after fixed tracks and gaps, subject to track minimums.
Control a track’s minimum
minmax(0,1fr) allows a flexible track to shrink below its content’s minimum size. Compare a plain 1fr first column with a zero-minimum first column, each beside 2fr. Both blue items contain the same 192px-wide content plus padding.
<div id="layout" class="grid grid-auto-rows:64px grid-template-columns:1fr|2fr gap-md w:17.5rem max-w:100%"> <div id="target" class="overflow:clip p-sm"><span class="block w:12rem">192px content</span></div> <div id="peer" class="p-sm">2</div></div><div id="layout" class="grid grid-auto-rows:64px grid-template-columns:minmax(0,1fr)|2fr gap-md w:17.5rem max-w:100%"> <div id="target" class="overflow:clip p-sm"><span class="block w:12rem">192px content</span></div> <div id="peer" class="p-sm">2</div></div>With an automatic minimum, the first track reserves room for the content. With a zero minimum, the available 264px divides into 88px and 176px tracks. The content itself stays 192px wide; overflow:clip makes its excess visibly stop at the blue cell. Track sizing and content overflow are separate choices. The non-scrollable clip value does not by itself remove the automatic track minimum.
Apply conditionally
Use conditional queries to change the layout at a real viewport width. Start with two equal fractional tracks. From sm, reserve 80px for the first column and let the second fill the remainder. The same four items continue into the next row.
<div id="layout" class="grid grid-auto-rows:48px grid-template-columns:1fr|1fr gap-md w:17.5rem max-w:100% grid-template-columns:80px|1fr@sm"> <div id="target" class="p-sm">01</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div></div>