How can I make a grid layout adapt to different screen sizes using media queries?
Asked on Oct 18, 2025
Answer
To create a grid layout that adapts to different screen sizes, you can use CSS Grid in combination with media queries. This approach allows you to define different grid configurations for various viewport widths.
<!-- 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>
<!-- END COPY / PASTE -->Additional Comment:
- Start with a basic grid layout using "grid-template-columns" to define the initial column structure.
- Use media queries to adjust the number of columns based on the viewport width.
- This example uses "repeat" to simplify column definitions, creating a responsive design.
- The "gap" property adds space between grid items, enhancing layout readability.
Recommended Links: