multicol-gap-decorations-020-ref.html (1499B)
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 #container { 10 border: 2px solid rgb(96 139 168); 11 width: 200px; 12 height: 200px; 13 column-gap: 10px; 14 row-gap: 10px; 15 column-width: 60px; 16 column-count: 3; 17 column-fill: auto; 18 } 19 20 p { 21 background: rgb(96 139 168 / 0.2); 22 height: 50px; 23 margin: 0px; 24 } 25 26 h2 { 27 column-span: all; 28 background-color: #4d4e53; 29 color: #fff; 30 margin: 0px; 31 opacity: 0.5; 32 height: 28px; 33 } 34 35 .column-decor-container { 36 position: absolute; 37 top: 2px; 38 left: 62px; 39 } 40 41 .column-decor { 42 width: 10px; 43 height: 33px; 44 background: blue; 45 position: relative; 46 } 47 48 </style> 49 50 <body> 51 <div class="column-decor-container"> 52 <div class="column-decor"> 53 </div> 54 <div class="column-decor" style="top: 28px; height: 50px;"> 55 </div> 56 <div class="column-decor" style="top: 56px; height: 61px;"> 57 </div> 58 </div> 59 <div class="column-decor-container" style="left: 132px"> 60 <div class="column-decor"> 61 </div> 62 <div class="column-decor" style="top: 28px; height: 50px;"> 63 </div> 64 <div class="column-decor" style="top: 56px; height: 61px;"> 65 </div> 66 </div> 67 <div id="container"> 68 <p></p> 69 <p></p> 70 <h2></h2> 71 72 <p></p> 73 <p></p> 74 <p></p> 75 <h2></h2> 76 <p></p> 77 <p></p> 78 <p></p> 79 </div> 80 </body>