multicol-gap-decorations-003-ref.html (1225B)
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 .outer { 10 11 border: 2px solid rgb(96 139 168); 12 width: 200px; 13 height: 200px; 14 15 } 16 17 .container1 { 18 position: absolute; 19 top: 2px; 20 column-gap: 10px; 21 display: flex; 22 height: 200px; 23 } 24 25 .items1 { 26 background: rgb(96 139 168 / 0.2); 27 height: 40px; 28 margin: 0px; 29 width: 60px; 30 height: 200px; 31 } 32 33 .column-gap1 { 34 position: absolute; 35 height: 200px; 36 width: 10px; 37 background: blue; 38 top: 2px; 39 } 40 41 .spanner { 42 position: absolute; 43 background: cyan; 44 width: 200px; 45 height: 18px; 46 top: 42px; 47 left: 2px; 48 opacity: 0.5; 49 } 50 </style> 51 <div class="outer"> 52 <div class="container1"> 53 <div class="items1"></div> 54 <div class="items1"></div> 55 <div class="items1"></div> 56 </div> 57 <div class="column-gap1" style="left:62px;"></div> 58 <div class="column-gap1" style="left:132px;"></div> 59 </div>