multicol-gap-decorations-004-ref.html (1767B)
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 border: 2px solid rgb(96 139 168); 11 width: 200px; 12 height: 130px; 13 } 14 15 .container1 { 16 width: 200px; 17 height: 130px; 18 column-gap: 10px; 19 display: flex; 20 } 21 22 .items1 { 23 background: rgb(96 139 168 / 0.2); 24 height: 60px; 25 margin: 0px; 26 width: 60px; 27 } 28 29 .container2 { 30 position: absolute; 31 top: 72px; 32 left: 2px; 33 width: 200px; 34 height: 60px; 35 column-gap: 10px; 36 display: flex; 37 } 38 39 .items2 { 40 background: rgb(96 139 168 / 0.2); 41 height: 60px; 42 margin: 0px; 43 width: 60px; 44 } 45 46 .row-gap { 47 position: absolute; 48 height: 4px; 49 width: 200px; 50 background: gold; 51 left: 2px; 52 top: 65px; 53 } 54 55 .column-gap { 56 position: absolute; 57 height: 60px; 58 width: 4px; 59 background: blue; 60 top: 2px; 61 } 62 </style> 63 64 <div class="outer"> 65 <div class="container1"> 66 <div class="items1"></div> 67 <div class="items1"></div> 68 <div class="items1"></div> 69 </div> 70 <div class="container2"> 71 <div class="items2"></div> 72 <div class="items2"></div> 73 <div class="items2"></div> 74 </div> 75 <div class="column-gap" style="left:65px;"></div> 76 <div class="column-gap" style="left:135px;"></div> 77 <div class="column-gap" style="left:65px; top: 72px"></div> 78 <div class="column-gap" style="left:135px; top: 72px"></div> 79 <div class="row-gap"></div> 80 </div>