flex-gap-decorations-029-ref.html (1253B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> 3 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 .flex { 9 display: flex; 10 flex-wrap: wrap; 11 gap: 20px; 12 left: 0px; 13 top: 0px; 14 width: 340px; 15 } 16 .item { 17 width: 100px; 18 height: 100px; 19 background: lightgray; 20 } 21 .row-decoration { 22 left: 1px; 23 top: 108.5px; 24 width: 334px; 25 height: 3px; 26 position: absolute; 27 background-color: gray; 28 } 29 .column-decoration { 30 position: absolute; 31 height: 105px; 32 width: 3px; 33 background-color: red; 34 } 35 </style> 36 <div class="row-decoration"></div> 37 <div class="column-decoration" style="top: 1px; left: 208.5px; height: 104px;"></div> 38 <div class="column-decoration" style="top: 120px; left: 108.5px; height: 110px;"></div> 39 <div class="column-decoration" style="top: 120px; left: 228.5px; height: 110px;"></div> 40 <div class="flex"> 41 <div class="item" style="width: 200px;"></div> 42 <div class="item"></div> 43 <div class="item"></div> 44 <div class="item"></div> 45 <div class="item"></div> 46 </div>