multicol-gap-decorations-014-ref.html (1279B)
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: 130px; 13 column-gap: 10px; 14 display: flex; 15 } 16 17 .items { 18 background: rgb(96 139 168 / 0.2); 19 height: 60px; 20 margin: 0px; 21 width: 60px; 22 } 23 24 .last-item { 25 position: absolute; 26 left: 2px; 27 top: 72px; 28 background: rgb(96 139 168 / 0.2); 29 height: 60px; 30 margin: 0px; 31 width: 60px; 32 } 33 34 .row-gap { 35 position: absolute; 36 height: 2px; 37 width: 200px; 38 background: gold; 39 left: 2px; 40 top: 66px; 41 } 42 43 .column-gap { 44 position: absolute; 45 height: 60px; 46 width: 10px; 47 background: blue; 48 top: 2px; 49 } 50 </style> 51 52 <div class="container"> 53 <div class="items"></div> 54 <div class="items"></div> 55 <div class="items"></div> 56 </div> 57 <div class="last-item"></div> 58 <div class="column-gap" style="left:62px;"></div> 59 <div class="column-gap" style="left:132px;"></div> 60 <div class="row-gap"></div>