Core Code
Core Code Modern Dev Handbook

Flex Gap Layout

Use gap to control spacing in responsive layouts.

Preview

Code

<style>
.grid{
display:flex;
flex-wrap:wrap;
gap:20px;
}

.item{
flex:1 1 180px;
background:#9333ea;
color:white;
padding:20px;
}
</style>

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

More Flex Responsive Examples (8)

example Flex Wrap Layout open example example Flexible Basis Cards open example example Responsive Navbar open example example Responsive Columns open example example Breakpoint Layout open example example Responsive Image Gallery open example example Responsive Sidebar Layout open example example Responsive Card Grid open example