multicol-gap-decorations-017-ref.html (1067B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 3 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 9 .container { 10 border: 2px solid rgb(96 139 168); 11 width: 210px; 12 height: 130px; 13 column-gap: 20px; 14 display: flex; 15 } 16 17 .items { 18 background: rgb(96 139 168 / 0.2); 19 height: 130px; 20 margin: 0px; 21 width: 56.666px; 22 } 23 24 .row-gap { 25 position: absolute; 26 height: 10px; 27 width: 210px; 28 background: gold; 29 left: 2px; 30 top: 62px; 31 } 32 33 .column-gap { 34 position: absolute; 35 height: 130px; 36 width: 20px; 37 background: blue; 38 top: 2px; 39 } 40 </style> 41 42 <div class="container"> 43 <div class="items"></div> 44 <div class="items"></div> 45 <div class="items"></div> 46 </div> 47 <div class="column-gap" style="left:58.666px;"></div> 48 <div class="column-gap" style="left:135.332px;"></div> 49 <div class="row-gap"></div>