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>
.container {
width: 110px;
height: 110px;
background: green;
column-count: 2;
column-gap: 10px;
column-rule-color: pink;
column-rule-style: double;
column-rule-width: 10px;
overflow: hidden;
}
.item {
background: skyblue;
height: 50px;
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: 10px;
}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>