gap-decorations-001-ref.html (908B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 3 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@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 50 <div class="column-gap"></div> 51 <div class="row-gap"></div>