multicol-gap-decorations-005-ref.html (1380B)
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 display: flex; 11 border: 1px solid #ccc; 12 height: 50px; 13 width: 210px; 14 column-gap: 10px; 15 } 16 17 .outer-items { 18 background: rgb(96 139 168 / 0.2); 19 height 50px; 20 width: 100px; 21 } 22 23 .inner { 24 display: flex; 25 height: 50px; 26 column-gap: 10px; 27 width: 100px; 28 } 29 30 .inner-items { 31 height: 50px; 32 width: 45px; 33 background: black; 34 } 35 36 .column-gap { 37 position: absolute; 38 height: 50px; 39 top: 1px; 40 left: 101px; 41 width: 10px; 42 } 43 44 .row-gap { 45 position: absolute; 46 background: purple; 47 height: 10px; 48 top: 21px; 49 left: 111px; 50 width: 100px; 51 } 52 </style> 53 <div class="outer"> 54 <div class="outer-items"></div> 55 <div class="outer-items" id="nested"> 56 <div class="inner"> 57 <div class="inner-items"></div> 58 <div class="inner-items"></div> 59 </div> 60 </div> 61 </div> 62 <div class="column-gap" style="background: blue;"></div> 63 <div class="column-gap" style="background: gold; left: 156px"></div> 64 <div class="row-gap"></div>