How can I make a CSS grid layout responsive to different screen sizes?
Asked on Sep 26, 2025
Answer
To make a CSS grid layout responsive, you can use media queries to adjust the grid's structure based on the viewport size. This allows you to define different grid configurations for various screen sizes, ensuring a flexible and adaptable layout.
<!-- BEGIN COPY / PASTE -->
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 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:
- Use `grid-template-columns` to define the number of columns and their sizes.
- Media queries like `@media (min-width: 600px)` allow you to specify different grid configurations for larger screens.
- The `repeat()` function simplifies defining multiple columns of equal size.
- Adjust the `gap` property to control spacing between grid items.
- Test the layout on various devices to ensure it adapts as expected.
Recommended Links: