Core Code
Core Code Modern Dev Handbook

Basic Responsive Grid

Create a responsive grid layout using CSS Grid.

Preview

Code

<style>
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.item{
background:#2563eb;
color:white;
padding:20px;
}

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

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

More RWD Grid View Examples (8)

example Auto-fit Responsive Grid open example example Responsive Grid with Flexbox open example example Responsive Image Grid open example example Grid Breakpoint Layout open example example Responsive Dashboard Grid open example example Responsive Card Layout open example example Responsive Sidebar Grid open example example Responsive Product Grid open example