Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a responsive CSS grid that adjusts the number of columns based on screen size?
Asked on Apr 07, 2026
Answer
To create a responsive CSS grid that adjusts the number of columns based on screen size, you can use CSS Grid Layout along with media queries. This allows you to define different grid configurations for various screen sizes.
<!-- BEGIN COPY / PASTE -->
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 10px;
}
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<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>Item 6</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "grid-template-columns" property defines the number of columns and their width.
- Media queries adjust the grid layout based on the viewport width.
- "repeat(n, 1fr)" creates "n" equal-width columns.
- Adjust the min-width values and column numbers to suit your design needs.
Recommended Links:
