grid-columns

Create equal grid columns with a zero minimum and fractional width.

Overview

Basic usage

Create equal columns

grid-cols:3 establishes display:grid and three equal tracks using repeat(3,minmax(0,1fr)). The six items fill across each row. In this 280px container, two 16px gaps are subtracted before the remaining width is divided into thirds.

<div id="layout" class="grid-cols:3 grid-auto-rows:48px gap-md w:17.5rem max-w:100%">  <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 id="item-5" class="p-sm">05</div>  <div id="item-6" class="p-sm">06</div></div>

@layer utilities {  .grid-cols\:3 {    display: grid;    grid-template-columns: repeat(3, minmax(0, 1fr))  }}

The zero track minimum allows the columns to stay equal. Long or fixed-width content can still overflow its cell; wrapping, clipping or scrolling is a separate content decision. Use grid-template-columns for unequal tracks or content-based sizing.

Apply conditionally

Use conditional queries to change the layout at a real viewport width. The same six items use two columns, then three from sm and four from lg. The container stays 280px wide so the change in track count is easy to compare.

<div id="layout" class="grid-cols:2 grid-auto-rows:48px gap-md w:17.5rem max-w:100% grid-cols:3@sm grid-cols:4@lg">  <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 id="item-5" class="p-sm">05</div>  <div id="item-6" class="p-sm">06</div></div>