How can I make a CSS grid layout adjust to different screen sizes without media queries?
Asked on Oct 10, 2025
Answer
To create a CSS grid layout that adjusts to different screen sizes without using media queries, you can use the `repeat()` function with the `auto-fit` or `auto-fill` keywords in combination with the `minmax()` function. This approach allows the grid to automatically adjust the number of columns based on the container's width.
<!-- BEGIN COPY / PASTE -->
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- The `auto-fit` keyword in `grid-template-columns` automatically fits as many columns as possible into the container.
- The `minmax(150px, 1fr)` function ensures each column is at least 150px wide and can grow to fill the available space.
- This approach creates a responsive grid without needing media queries, as it adapts to the container's size.
- Adjust the `minmax()` values to control the minimum column width and flexibility.
Recommended Links: