Introduction to the fr Unit

When you want to build layouts that adapt smoothly to any screen size, the fr unit is a powerful tool at your disposal. The fr (fraction) unit in CSS Grid allows you to allocate a portion of available space to grid tracks. Unlike fixed units such as px or %, the fr unit distributes space dynamically, ensuring that your grid remains flexible and responsive.

If you set your grid columns to 1fr 2fr, the first column receives one part of the available space and the second column receives two parts, regardless of the overall grid width. This makes the fr unit essential for creating layouts that scale elegantly without manual adjustments.

How minmax() Works and When to Use It

The minmax() function lets you define a size range for a grid track by specifying both a minimum and a maximum value. This approach is essential for responsive design because it prevents grid tracks from becoming too small to read or too wide to maintain a balanced layout.

• Use minmax(min, max) to set a lower and upper size boundary for columns or rows;
• Ensure content stays legible by setting a reasonable minimum value;
• Allow tracks to expand and fill available space by pairing minmax() with fr units;
• Maintain flexible, user-friendly layouts across all screen sizes.

For example, minmax(150px, 1fr) ensures a column will never shrink below 150px but can grow as large as available space allows. Apply minmax() when you want images, cards, or content blocks to remain readable and visually balanced, while still taking advantage of dynamic space distribution.