Responsive Grid

Preview

Code

<style>
.grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;
}

.item{
background:#9333ea;
color:white;
padding:20px;
}

@media (max-width:700px){
.grid{
grid-template-columns:1fr;
}
}
</style>

<div class="grid">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>

More CSS Media Queries Examples (8)

Basic Media Query Min Width Breakpoint Max Width Breakpoint Responsive Layout Orientation Query Reduced Motion Preference Dark Mode Query Multiple Conditions