multicol-gap-decorations-007-ref.html (4338B)
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 width: 620px; 11 height: 200px; 12 background: yellow; 13 } 14 15 .inner1 { 16 border-top: 2px solid; 17 border-left: 2px solid; 18 border-right: 2px solid; 19 background: cyan; 20 height: 198px; 21 width: 296px; 22 } 23 24 .inner2 { 25 border-bottom: 2px solid; 26 border-left: 2px solid; 27 border-right: 2px solid; 28 position: absolute; 29 left: 320px; 30 top: 0px; 31 height: 130px; 32 width: 296px; 33 background: cyan 34 } 35 36 .inner-flex { 37 display: flex; 38 column-gap: 20px; 39 } 40 41 .inner-items { 42 background: hotpink; 43 width: 85.333px; 44 } 45 46 .column-gap1 { 47 width: 10px; 48 background: blue; 49 position: absolute; 50 top: 2px; 51 } 52 53 .column-gap2 { 54 width: 10px; 55 background: blue; 56 position: absolute; 57 top: 40px; 58 } 59 60 .spanner { 61 background: grey; 62 opacity: 0.5; 63 height: 18px; 64 width: 296px; 65 } 66 67 .row-gap1 { 68 height: 10px; 69 background: green; 70 position: relative; 71 width: 296px; 72 top: 105px; 73 } 74 75 .row-gap2 { 76 height: 10px; 77 background: green; 78 position: absolute; 79 width: 296px; 80 top: 105px; 81 } 82 83 .column-gap3 { 84 background: blue; 85 height: 100px; 86 position: absolute; 87 width: 10px; 88 top: 0px; 89 } 90 </style> 91 92 <div id="outer"> 93 <div class="inner1"> 94 <div class="inner-flex"> 95 <div class="inner-items" style="height:20px;"></div> 96 <div class="inner-items" style="height:20px" ;></div> 97 <div class="inner-items" style="height:20px;"></div> 98 </div> 99 <div class="inner-flex" style="position: absolute; left:2px; top:40px"> 100 <div class="inner-items" style="height:100px;"></div> 101 <div class="inner-items" style="height:100px" ;></div> 102 <div class="inner-items" style="height:100px;"></div> 103 </div> 104 <div class="inner-flex" style="position: absolute; left:2px; top:160px"> 105 <div class="inner-items" style="height:40px;"></div> 106 <div class="inner-items" style="height:40px" ;></div> 107 <div class="inner-items" style="height:40px;"></div> 108 </div> 109 <div class="spanner"></div> 110 <div class="column-gap1" style="height: 20px; left:calc(2px + 85.333px + 5px)"></div> 111 <div class="column-gap1" style="height: 20px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)"> 112 </div> 113 <div class="column-gap2" style="height: 100px; left:calc(2px + 85.333px + 5px)"></div> 114 <div class="column-gap2" style="height: 100px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)"></div> 115 <div class="column-gap2" style="top: 160px; height: 40px; left:calc(2px + 85.333px + 5px)"></div> 116 <div class="column-gap2" style="top: 160px; height: 40px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)"></div> 117 <div class="row-gap1"></div> 118 </div> 119 <div class="inner2"> 120 <div class="inner-flex"> 121 <div class="inner-items" style="height:100px"></div> 122 <div class="inner-items" style="height:100px"></div> 123 <div class="inner-items" style="height:100px"></div> 124 </div> 125 <div class="inner-flex" style="position: absolute; top:120px;"> 126 <div class="inner-items" style="height:10px"></div> 127 <div class="inner-items" style="height:10px"></div> 128 <div class="inner-items" style="height:10px"></div> 129 </div> 130 <div class="column-gap3" style="left:calc(85.333px + 5px);"></div> 131 <div class="column-gap3" style="left:calc(85.333px + 5px + 10px + 5px + 85.333px + 5px);"></div> 132 <div class="column-gap3" style="top: 120px; height: 10px;left:calc(85.333px + 5px);"></div> 133 <div class="column-gap3" style="top: 120px; height: 10px;left:calc(85.333px + 5px + 10px + 5px + 85.333px + 5px);"></div> 134 <div class="row-gap2"></div> 135 </div>