Auto-fit and auto-fill help you create responsive grid layouts without using media queries.
They automatically adjust the number of columns based on available space.
This makes your design flexible on mobile, tablet, and desktop screens.
Auto-fit creates as many columns as possible and stretches items to fill the available space.
When the screen becomes smaller, the number of columns reduces automatically.
Auto-fill creates as many columns as will fit, even if some of them are empty.
This is useful when you want consistent column structure.
This technique is commonly used in image galleries and product grids.
It automatically adjusts the number of columns based on screen size.
Difference between auto-fit and auto-fill
- Auto-fit stretches items to fill empty space
- Auto-fill keeps empty columns if there is space
- Both help in building responsive grids
Auto-fit is often preferred because it avoids empty spaces in the layout.
Practice task
Create a grid layout using:
- repeat with auto-fit
- minmax for column size
- Resize the browser and observe how columns change
Next lesson
In the next page, you will learn about minmax and fraction units in detail.