multicol-gap-decorations-011-ref.html (2583B)
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 position: relative; 11 border: 2px solid rgb(96 139 168); 12 width: 200px; 13 height: 200px; 14 } 15 16 .container { 17 position: absolute; 18 column-gap: 10px; 19 display: flex; 20 } 21 22 .item { 23 background: rgb(96 139 168 / 0.2); 24 height: 100%; 25 width: 60px; 26 } 27 28 .row-gap { 29 position: absolute; 30 height: 2px; 31 margin: 4px 0; 32 width: 200px; 33 background: gold; 34 left: 0; 35 top: 120px; 36 } 37 38 .column-gap { 39 position: absolute; 40 width: 2px; 41 margin: 0 4px; 42 background: blue; 43 } 44 45 .spanner { 46 position: absolute; 47 background: cyan; 48 width: 200px; 49 height: 18px; 50 top: 40px; 51 left: 0; 52 opacity: 0.5; 53 } 54 </style> 55 56 <div class="outer"> 57 <div class="container" style="top:0; height:40px;"> 58 <div class="item"></div> 59 <div class="item"></div> 60 <div class="item"></div> 61 </div> 62 <div class="container" style="top:58px; height:2px;"> 63 <div class="item"></div> 64 <div class="item"></div> 65 <div class="item"></div> 66 </div> 67 <div class="container" style="top:70px; height:60px;"> 68 <div class="item"></div> 69 <div class="item"></div> 70 <div class="item"></div> 71 </div> 72 <div class="container" style="top:140px; height:60px;"> 73 <div class="item"></div> 74 <div class="item"></div> 75 <!-- Remove the 6px consumed after the spanner in the first row: --> 76 <div class="item" style="height:54px;"></div> 77 </div> 78 <div class="column-gap" style="top:0; left:60px; height:40px;"></div> 79 <div class="column-gap" style="top:0; left:130px; height:40px;"></div> 80 <div class="column-gap" style="top:58px; left:60px; height:2px;"></div> 81 <div class="column-gap" style="top:58px; left:130px; height:2px;"></div> 82 <div class="column-gap" style="top:70px; left:60px; height:60px;"></div> 83 <div class="column-gap" style="top:70px; left:130px; height:60px;"></div> 84 <div class="column-gap" style="top:140px; left:60px; height:60px;"></div> 85 <div class="column-gap" style="top:140px; left:130px; height:60px;"></div> 86 <div class="row-gap" style="top:60px;"></div> 87 <div class="row-gap" style="top:130px;"></div> 88 <div class="spanner"></div> 89 </div>