CSS Grid gives you powerful sizing control using minmax and fraction units.
Minmax lets you set a minimum and maximum size for columns or rows.
Fraction units (fr) divide available space into flexible parts.
Together, they help you build layouts that adapt perfectly to different screen sizes.
Minmax 150px, 300px means the column will never be smaller than 150px and never larger than 300px.
This gives you control while still allowing flexibility.
Fraction units divide the space based on ratios.
Here, the first column takes double space compared to the other two.
This layout keeps the sidebar within a fixed range while the content expands freely.
This is commonly used in admin panels and dashboards.
When to use minmax and fr
- Use minmax when you need limits
- Use fr when you want flexible space
- Combine both for responsive layouts
This pattern is perfect for card layouts that must look good on all devices.
Practice task
Create a grid layout using:
- minmax for column width
- fr units for spacing
- Resize the browser to test responsiveness
Next lesson
In the next page, you will learn how to align items in CSS Grid.