Framework7 572,986 's grid is utility classes over CSS Grid. grid sets display: grid, grid-cols-N (1 to
sets grid-template-columns: repeat(N, minmax(0, 1fr)), grid-rows-N does the same for rows, and grid-gap
adds gap: var(--f7-grid-gap) (16 px). A size prefix applies a count from a breakpoint up: xsmall- 480 px, small- 568 px, medium- 768 px, large- 1024 px and xlarge- 1200 px. The catalog in Catalog Page uses grid grid-cols-2 medium-grid-cols-3 large-grid-cols-6 grid-gap: two covers a row on a phone, three on a portrait tablet, all six on a wide screen. At 900 CSS pixels with an iPad user agent:
minmax(0, 1fr) matters. A bare 1fr track means minmax(auto, 1fr), so one long unbreakable title would widen its column; a zero minimum keeps the columns equal. Framework7 8.0 (April 2023) rebuilt the grid on CSS Grid and dropped the flexbox row/col classes, so a version 7 <div class="row"><div class="col-50"> becomes <div class="grid grid-cols-2">.