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;
}
.container {
width: 108px;
height: 108px;
background: green;
column-count: 2;
column-gap: 12px;
column-rule-color: pink;
column-rule-style: double;
column-rule-width: 12px;
overflow: hidden;
}
.item {
background: skyblue;
height: 48px;
width: 100%;
margin: 0;
}
/* For 2x2 grid-like layout, add a 10px bottom margin to
odd children(#1 & #3) to simulate a horizontal row gap.*/
.item:nth-child(odd) {
margin-bottom: 12px;
}
.row-gap {
margin: 0px;
padding: 0px;
height: 4px;
background: pink;
width: 108px;
position: absolute;
}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- Two horizontal bars to simulate row gaps with style double -->
<div id="horizontal1" class="row-gap" style="top: 48px;"></div>
<div id="horizontal2" class="row-gap" style="top: 56px;"></div>