grid-gap-decorations-011-ref.html (1224B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> 3 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 9 .grid-container { 10 display: grid; 11 grid-gap: 10px; 12 grid-template-columns: 100px 100px 100px; 13 height: 320px; 14 } 15 16 .item { 17 background: gray; 18 opacity: 0.5; 19 } 20 21 .row-gap { 22 position: absolute; 23 width: 320px; 24 height: 0px; 25 border-bottom: solid 5px red; 26 } 27 28 .row-gap1 { 29 top: 102.5px; 30 } 31 32 .row-gap2 { 33 top: 212.5px; 34 } 35 36 .col-gap { 37 position: absolute; 38 top: 0px; 39 width: 0px; 40 height: 320px; 41 border-left: solid 5px blue; 42 } 43 44 .col-gap1 { 45 left: 102.5px; 46 } 47 48 .col-gap2 { 49 left: 212.5px; 50 } 51 </style> 52 <div class="grid-container"> 53 <div class="item"></div> 54 <div class="item"></div> 55 <div class="item"></div> 56 <div class="item"></div> 57 <div class="item"></div> 58 <div class="item"></div> 59 <div class="item"></div> 60 <div class="item"></div> 61 <div class="item"></div> 62 </div> 63 64 <div class="col-gap col-gap1"> </div> 65 <div class="col-gap col-gap2"> </div> 66 67 <div class="row-gap row-gap1"> </div> 68 <div class="row-gap row-gap2"> </div>