Understanding Grid Tracks
Grid tracks are the rows and columns that define your grid structure. Each track can be sized using various units: fr units distribute remaining space proportionally, px sets fixed dimensions, and auto sizes tracks based on content. The repeat() function simplifies repetitive track definitions.
The fr Unit Explained
The fr unit represents a fraction of the available space in the grid container. If you define three columns as 1fr 2fr 1fr, the middle column takes twice the space of each outer column. This unit makes creating proportional layouts intuitive and avoids complex percentage calculations.
Gap and Spacing
The gap property controls spacing between grid cells without affecting the outer edges. Previously called grid-gap, the shorthand gap property works in both Grid and Flexbox. You can set row and column gaps independently using row-gap and column-gap for more precise spacing control.
Common Layout Patterns
The Holy Grail layout uses a header spanning all columns, a three-column middle section, and a full-width footer. Dashboard layouts feature a fixed sidebar with a flexible content grid. Gallery layouts use equal fr units for uniform cells. These patterns form the foundation of most web page structures.
