How do you make a CSS grid layout responsive with media queries?
Asked on Oct 06, 2025
Answer
To make a CSS grid layout responsive, you can use media queries to adjust the grid's structure based on the screen size. This allows you to change the number of columns, rows, or other properties to ensure the layout looks good on different devices.
<!-- BEGIN COPY / PASTE -->
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.grid-container {
grid-template-columns: 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:
- Use "grid-template-columns" to define the number of columns in your grid layout.
- Media queries like "@media (max-width: 768px)" help you adjust the grid for tablets and smaller screens.
- Adjust the "gap" property to control spacing between grid items.
- Test your layout on different devices to ensure it adapts as expected.
Recommended Links: