Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a responsive CSS grid layout that adjusts column count based on screen size?
Asked on May 21, 2026
Answer
To create a responsive CSS grid layout that adjusts the column count based on screen size, you can use CSS Grid along with media queries. This allows you to define different grid configurations for various screen widths.
<!-- 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 widths.
- Media queries adjust the grid layout at specified breakpoints (600px and 900px in this example).
- Using "repeat" with "1fr" ensures that columns are evenly distributed.
- Adjust the breakpoints and column counts to fit your design needs.
Recommended Links:
