Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a CSS grid layout that adapts to different screen sizes?
Asked on May 11, 2026
Answer
To create a CSS grid layout that adapts to different screen sizes, you can use CSS Grid along with media queries. This allows you to define different grid structures for various screen widths, ensuring your layout remains responsive and user-friendly.
<!-- 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 adjust the grid layout based on screen width, allowing for different column counts at specified breakpoints.
- The "repeat" function simplifies defining multiple columns of equal size.
- Adjust the "gap" property to control spacing between grid items.
Recommended Links:
