Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body { margin: 0; }
.multi-column {
position: relative;
columns: 3;
column-width: 110px;
column-gap: 10px;
height: 100px;
width: 350px;
background: lightgray;
column-fill: auto;
}
#flexbox {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 110px;
height: 300px;
row-gap: 10px;
column-gap: 10px;
}
.l0 { background: cornflowerblue; width: 50px; }
.l1 { background: goldenrod; width: 50px; }
.col-rule { position: absolute; top: 0; width: 10px; height: 100px; background: purple; }
.row-rule { position: absolute; width: 50px; height: 10px; }
</style>
<div class="multi-column">
<div class="col-rule" style="left: 50px;"></div>
<div class="col-rule" style="left: 170px;"></div>
<div class="col-rule" style="left: 290px;"></div>
<div class="row-rule" style="left: 240px; top: 40px; background: blue;"></div>
<div class="row-rule" style="left: 300px; top: 40px; background: pink;"></div>
<div id="flexbox">
<div class="l0" style="height: 200px;"></div>
<div class="l0" style="height: 40px;"></div>
<div class="l0" style="height: 40px;"></div>
<div class="l1" style="height: 240px;"></div>
<div class="l1" style="height: 40px;"></div>
</div>
</div>