73. Sizing with minmax() and auto

Grid offers powerful functions to create flexible yet constrained track sizes, vital for responsive design.

1. The auto Keyword

When used in grid-template-columns/rows:

• Fixed Dimension Context: If other tracks are fixed, auto takes up the remaining available space.
• Content Context: If all tracks are auto, the track size is determined by the content within the items.

2. The minmax() Function

minmax(min, max) defines a size range for a grid track. The track will be no smaller than min and no larger than max.

css .container { grid-template-columns: minmax(200px, 300px) /* Column 1: always between 200px and 300px / 1fr; / Column 2: takes remaining fraction */ }

Practical Use Case: Flexible Content

This is commonly used to ensure content containers are never too small for readability but can stretch to fill space:

css .flexible-column { /* Always at least 300px wide, but can stretch to fill the rest of the space */ grid-template-columns: minmax(300px, 1fr) 1fr; }