grid-gap-decorations-052-ref.html (1643B)
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 .column-decoration { 21 position: absolute; 22 top: 0px; 23 height: 340px; 24 width: 3px; 25 background: red; 26 height: 105px; 27 } 28 .row-decoration { 29 position: absolute; 30 height: 3px; 31 background-color: gray; 32 width: 334px; 33 left: 1px; 34 } 35 </style> 36 <div class="column-decoration" style="left: 108.5px"></div> 37 <div class="column-decoration" style="left: 228.5px"></div> 38 <div class="column-decoration" style="left: 108.5px; top: 120px;"></div> 39 <div class="column-decoration" style="left: 228.5px; top: 120px;"></div> 40 <div class="column-decoration" style="left: 108.5px; top: 240px; height: 100px"></div> 41 <div class="column-decoration" style="left: 228.5px; top: 240px; height: 100px"></div> 42 <div class="row-decoration" style="top: 108.5px;"></div> 43 <div class="row-decoration" style="top: 228.5px;"></div> 44 <div class="grid"> 45 <div class="item"></div> 46 <div class="item"></div> 47 <div class="item"></div> 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>