Flexbo saysgrid-template-columns and -rows define track sizes, with the fr unit and repeat().
grid-template-columns: 1fr 2fr makes two columns sharing space 1:2. The fr unit is a fraction of free space. repeat(3, 1fr) is shorthand for three equal columns, and minmax(200px, 1fr) sets a floor and ceiling — the building blocks of responsive grids.
Power-ups you unlock
grid-template-columns/rows define tracks
fr = fraction of available space
repeat(n, …) avoids repetition
minmax(min, max) bounds a track
The Float Phantom attacks — common mistakes
Mixing fixed px and fr without minmax (overflow)
Writing 1fr twelve times instead of repeat()
Setting row templates when auto rows suffice
Boss battleBuild a layout with a 200px sidebar and a 1fr main using grid-template-columns.