Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
<style>
body {
margin: 0px;
}
.multi-col {
position: relative;
height: 100px;
width: 320px;
columns: 3;
column-fill: auto;
column-gap: 10px;
background: lightgray;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* Simulate row gaps with row tracks */
grid-template-rows: repeat(2, 50px 20px) 50px 10px 50px;
column-gap: 10px;
}
.grid-container>div {
background-color: skyblue;
}
.column-gap {
position: absolute;
background: blue;
height: 100px;
width: 6px;
}
.row-gap {
position: absolute;
background: red;
height: 10px;
width: 100px;
}
</style>
<div class="multi-col">
<div class="grid-container">
<div></div>
<div></div>
<div style="grid-column: 1/3; background: lightgray;"></div>
<div></div>
<div></div>
<div style="grid-column: 1/3; background: lightgray;"></div>
<div></div>
<div></div>
<div style="grid-column: 1/3; background: lightgray;"></div>
<div></div>
<div></div>
</div>
<div class="column-gap" style="left: 47px; top: 0px;"></div>
<div class="column-gap" style="left: 157px; top: 0px;"></div>
<div class="column-gap" style="left: 267px; top: 0px; height: 50px;"></div>
<div class="row-gap" style="left: 0px; top: 55px;"></div>
<div class="row-gap" style="left: 110px; top: 25px;"></div>
</div>