multicol-gap-decorations-023-ref.html (1434B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> 3 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 .container { 9 border: 2px solid rgb(96 139 168); 10 width: 200px; 11 height: 130px; 12 column-count: 3; 13 column-width: 60px; 14 column-height: 60px; 15 column-gap: 10px; 16 row-gap: 10px; 17 } 18 .items { 19 background: rgb(96 139 168 / 0.2); 20 height: 60px; 21 margin: 0px; 22 width: 60px; 23 } 24 .row-gap { 25 position: absolute; 26 height: 10px; 27 top: 62px; 28 background: gold; 29 width: 203px; 30 } 31 .row { 32 background: gold; 33 width: 60px; 34 } 35 .column-gap { 36 position: absolute; 37 height: 68px; 38 width: 10px; 39 background: blue; 40 top: 2px; 41 } 42 </style> 43 <div class="container"> 44 <div class="items"></div> 45 <div class="items"></div> 46 <div class="items"></div> 47 <div class="items"></div> 48 <div class="items"></div> 49 <div class="items"></div> 50 </div> 51 <div class="row-gap" style="left:0px;"></div> 52 <div class="column-gap" style="left:62px;"></div> 53 <div class="column-gap" style="left:132px;"></div> 54 <div class="column-gap" style="left:62px; top:72px; height: 60px"></div> 55 <div class="column-gap" style="left:132px; top:72px; height:60px;"></div>