Core Code
Core Code Modern Dev Handbook

Responsive Columns

Columns can wrap automatically on smaller screens.

Preview

Code

<style>
.layout{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.col{
flex:1 1 250px;
background:#22c55e;
color:white;
padding:20px;
}
</style>

<div class="layout">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</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 Flex Gap Layout 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