A grid organizes a layout into intersecting rows and columns, giving visual elements a clear structure for alignment, spacing, and proportion. Its dimensions are mathematical: fixed tracks and gaps consume space before fractional tracks divide what remains. section 1.2.1 section 4.3.3
Accounting for the box model
For an 800px-wide container with a 200px fixed column, two 30px gaps, 6px borders, and 15px padding, the remaining space is 498px. With tracks of 2fr and 1fr, the columns become 332px and 166px. Padding and borders must be subtracted before distributing fractional space. section 4.3.3
.container {
display: grid;
grid-template-columns: 200px 2fr 1fr;
gap: 30px;
border: 6px solid black;
padding: 15px;
width: 800px;
}
Inspect the CSS Grid declaration that produces one fixed track, two fractional tracks, fixed gaps, borders, padding, and an explicit container width. section 4.3.3
