multicol-gap-decorations-022-ref.html (1372B)
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 width: 195px; 28 background: gold; 29 left: 2px; 30 top: 62px; 31 } 32 .column-gap { 33 position: absolute; 34 height: 65px; 35 width: 10px; 36 background: blue; 37 top: 2px; 38 } 39 </style> 40 <div class="container"> 41 <div class="items"></div> 42 <div class="items"></div> 43 <div class="items"></div> 44 <div class="items"></div> 45 <div class="items"></div> 46 <div class="items"></div> 47 </div> 48 <div class="row-gap"></div> 49 <div class="column-gap" style="left:62px; height: 60px"></div> 50 <div class="column-gap" style="left:132px; height: 60px;"></div> 51 <div class="column-gap" style="left:62px; top:72px;"></div> 52 <div class="column-gap" style="left:132px; top:72px"></div>