multicol-gap-decorations-024-ref.html (1245B)
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 width: 200px; 11 height: 150px; 12 column-count: 3; 13 column-width: 60px; 14 column-height: 70px; 15 column-gap: 10px; 16 row-gap: 10px; 17 column-wrap: wrap; 18 } 19 20 .items { 21 background: rgb(96 139 168 / 0.2); 22 height: 70px; 23 width: 60px; 24 margin: 0px; 25 writing-mode: vertical-rl; 26 } 27 28 .col-rule { 29 position: absolute; 30 top: 0px; 31 height: 150px; 32 width: 10px; 33 background: blue; 34 } 35 36 .row-rule { 37 position: absolute; 38 height: 10px; 39 width: 200px; 40 background: gold; 41 left: 0px; 42 top: 70px; 43 } 44 </style> 45 46 <div class="col-rule" style="left: 60px;"></div> 47 <div class="col-rule" style="left: 130px;"></div> 48 49 <div class="row-rule"></div> 50 51 <div class="container"> 52 <div class="items"></div> 53 <div class="items"></div> 54 <div class="items"></div> 55 <div class="items"></div> 56 <div class="items"></div> 57 <div class="items"></div> 58 </div>