gap-decorations-006-ref.html (943B)
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 display: flex; 11 width: 110px; 12 height: 110px; 13 column-gap: 10px; 14 row-gap: 10px; 15 flex-wrap: wrap; 16 } 17 18 .item { 19 background: skyblue; 20 height: 50px; 21 width: 50px; 22 margin: 0; 23 } 24 25 .row-gap { 26 position: absolute; 27 top: 50px; 28 background: green; 29 width: 110px; 30 height: 10px; 31 } 32 33 .column-gap { 34 position: absolute; 35 top: 0px; 36 left: 50px; 37 background: pink; 38 height: 110px; 39 width: 10px; 40 } 41 42 </style> 43 <div class="container"> 44 <div class="item"></div> 45 <div class="item"></div> 46 <div class="item"></div> 47 <div class="item"></div> 48 </div> 49 <button id="btn">Set decorations</button> 50 51 <div class="column-gap"></div> 52 <div class="row-gap"></div>