Blog

CSS Grid 1: Tracks, fr, repeat(auto-fill, minmax()) and Named Grid Areas

repeat(auto-fill, minmax(14rem, 1fr)) builds a responsive grid without media queries by creating as many columns as fit the container; auto-fit collapses the empty columns to zero and stretches the items. We build Bookstore's catalog grid and page skeleton with Grid, and measure in Chromium and WebKit the difference between fr and minmax(0, 1fr), the implicit grid, named lines, grid-template-areas and how dense breaks the DOM order.