grid-gap-decorations-053-ref.html (2000B)
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 .grid { 9 display: grid; 10 grid-template: repeat(auto-fill, 100px) / repeat(3, 100px); 11 grid-gap: 20px; 12 left: 0px; 13 top: 0px; 14 } 15 .item { 16 width: 100px; 17 height: 100px; 18 background: lightgray; 19 } 20 .row-decoration { 21 left: 0px; 22 height: 3px; 23 position: absolute; 24 background: grey; 25 width: 100px; 26 } 27 .column-decoration { 28 position: absolute; 29 top: 0px; 30 width: 3px; 31 background: red; 32 height: 108px; 33 } 34 </style> 35 <div class="column-decoration" style="left: 108.5px; top: 1px; height: 107px;"></div> 36 <div class="column-decoration" style="left: 228.5px; top: 1px; height: 107px;"></div> 37 <div class="column-decoration" style="left: 108.5px; top: 120px;"></div> 38 <div class="column-decoration" style="left: 228.5px; top: 120px;"></div> 39 <div class="column-decoration" style="left: 108.5px; top: 240px; height: 110px;"></div> 40 <div class="column-decoration" style="left: 228.5px; top: 240px; height: 110px;"></div> 41 <div class="row-decoration" style="top: 108.5px; width: 99px;"></div> 42 <div class="row-decoration" style="top: 228.5px; width: 99px;"></div> 43 <div class="row-decoration" style="top: 108.5px; width: 99px; left: 120px;"></div> 44 <div class="row-decoration" style="top: 228.5px; width: 99px; left: 120px;"></div> 45 <div class="row-decoration" style="top: 108.5px; left: 240px;"></div> 46 <div class="row-decoration" style="top: 228.5px; left: 240px;"></div> 47 <div class="grid"> 48 <div class="item"></div> 49 <div class="item"></div> 50 <div class="item"></div> 51 <div class="item"></div> 52 <div class="item"></div> 53 <div class="item"></div> 54 <div class="item"></div> 55 <div class="item"></div> 56 <div class="item"></div> 57 </div>