Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<link rel="author" title="Kevin Babbitt" href="mailto:kbabbitt@microsoft.com">
<style>
body {
margin: 0px;
}
.section {
position: relative;
margin-bottom: 20px;
}
.multicol {
column-count: 3;
column-width: 100px;
column-height: 100px;
column-gap: 20px;
row-gap: 20px;
column-wrap: wrap;
width: 340px;
height: 220px;
}
.item {
background: lightgray;
width: 100px;
height: 100px;
}
.item:first-child {
background: salmon;
}
.col-seg {
position: absolute;
width: 6px;
background: blue;
}
.row-seg {
position: absolute;
height: 6px;
background: red;
}
</style>
<!-- direction: ltr
Column rules at x=107, x=227 (centered 6px in 20px gap).
Column segments broken at row gap, inset-start(top)=10, inset-end(bottom)=0.
Row rule at y=107.
Row segments broken at col gaps, inset-start(left in ltr)=10, inset-end(right)=0. -->
<div class="section">
<!-- Column rule 1 (x=107) segments -->
<div class="col-seg" style="left: 107px; top: 10px; height: 90px;"></div>
<div class="col-seg" style="left: 107px; top: 130px; height: 90px;"></div>
<!-- Column rule 2 (x=227) segments -->
<div class="col-seg" style="left: 227px; top: 10px; height: 90px;"></div>
<div class="col-seg" style="left: 227px; top: 130px; height: 90px;"></div>
<!-- Row rule (y=107) segments — inset 10px from left -->
<div class="row-seg" style="top: 107px; left: 10px; width: 90px;"></div>
<div class="row-seg" style="top: 107px; left: 130px; width: 90px;"></div>
<div class="row-seg" style="top: 107px; left: 250px; width: 90px;"></div>
<div class="multicol" style="direction: ltr;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<!-- direction: rtl
Column rules unchanged (block axis unaffected by direction).
Row rule inset-start now means right (inline-start in rtl), so segments
are inset 10px from the right instead of the left. -->
<div class="section">
<!-- Column rule 1 (x=107) segments — same as ltr -->
<div class="col-seg" style="left: 107px; top: 10px; height: 90px;"></div>
<div class="col-seg" style="left: 107px; top: 130px; height: 90px;"></div>
<!-- Column rule 2 (x=227) segments — same as ltr -->
<div class="col-seg" style="left: 227px; top: 10px; height: 90px;"></div>
<div class="col-seg" style="left: 227px; top: 130px; height: 90px;"></div>
<!-- Row rule (y=107) segments — inset 10px from right -->
<div class="row-seg" style="top: 107px; left: 0px; width: 90px;"></div>
<div class="row-seg" style="top: 107px; left: 120px; width: 90px;"></div>
<div class="row-seg" style="top: 107px; left: 240px; width: 90px;"></div>
<div class="multicol" style="direction: rtl;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>