multicol-gap-decorations-010-ref.html (2511B)
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 column-gap: 10px; 31 height: 10px; 32 left: 2px; 33 right: 2px; 34 } 35 .row-gap > div { 36 width: 100%; 37 height: 100%; 38 background: gold; 39 } 40 .column-gap { 41 position: absolute; 42 width: 10px; 43 background: blue; 44 } 45 46 .spanner { 47 position: absolute; 48 background: cyan; 49 width: 200px; 50 height: 18px; 51 top: 40px; 52 left: 0; 53 opacity: 0.5; 54 } 55 </style> 56 57 <div class="outer"> 58 <div class="container" style="top:0; height:40px;"> 59 <div class="item"></div> 60 <div class="item"></div> 61 <div class="item"></div> 62 </div> 63 <div class="container" style="top:58px; height:2px;"> 64 <div class="item"></div> 65 <div class="item"></div> 66 <div class="item"></div> 67 </div> 68 <div class="container" style="top:70px; height:60px;"> 69 <div class="item"></div> 70 <div class="item"></div> 71 <div class="item"></div> 72 </div> 73 <div class="container" style="top:140px; height:60px;"> 74 <div class="item"></div> 75 <div class="item"></div> 76 <!-- Remove the 6px consumed after the spanner in the first row: --> 77 <div class="item" style="height:54px;"></div> 78 </div> 79 <div class="column-gap" style="top:2px; left:60px; height:36px;"></div> 80 <div class="column-gap" style="top:2px; left:130px; height:36px;"></div> 81 <div class="column-gap" style="top:72px; left:60px; height:56px;"></div> 82 <div class="column-gap" style="top:72px; left:130px; height:56px;"></div> 83 <div class="column-gap" style="top:142px; left:60px; height:56px;"></div> 84 <div class="column-gap" style="top:142px; left:130px; height:56px;"></div> 85 <div class="row-gap" style="top:60px;"> 86 <div></div> 87 </div> 88 <div class="row-gap" style="top:130px;"> 89 <div></div> 90 </div> 91 <div class="spanner"></div> 92 </div>