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 adapts to different screen sizes?
Asked on Feb 14, 2026
Answer
Creating a responsive CSS grid layout involves using CSS Grid properties to define flexible grid structures that adjust based on screen size. This is typically achieved using media queries to modify grid settings for different breakpoints.
<!-- BEGIN COPY / PASTE -->
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 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: repeat(auto-fill, minmax(150px, 1fr));" line creates a flexible grid that fills the available space with columns of at least 150px width.
- Media queries adjust the grid layout at specified breakpoints (600px and 900px in this example), changing the number of columns.
- Using "gap" helps maintain consistent spacing between grid items.
- This approach ensures the grid is responsive and adapts to various screen sizes without fixed column counts.
Recommended Links:
