grid-gap-decorations-029-ref.html (1278B)
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 .grid-container { 10 display: grid; 11 grid-gap: 10px; 12 grid-template-columns: 100px 100px 100px; 13 grid-template-rows: 100px 100px 100px; 14 width: 120px; 15 height: 120px; 16 } 17 18 .item { 19 background: gray; 20 opacity: 0.5; 21 } 22 23 .row-gap { 24 position: absolute; 25 width: 320px; 26 height: 0px; 27 border-bottom: solid 5px red; 28 } 29 30 .row-gap1 { 31 top: 102.5px; 32 } 33 34 .row-gap2 { 35 top: 212.5px; 36 } 37 38 .col-gap { 39 position: absolute; 40 top: 0px; 41 width: 0px; 42 height: 320px; 43 border-left: solid 5px blue; 44 } 45 46 .col-gap1 { 47 left: 102.5px; 48 } 49 50 .col-gap2 { 51 left: 212.5px; 52 } 53 </style> 54 <div class="grid-container"> 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 class="item"></div> 63 <div class="item"></div> 64 </div> 65 66 <div class="col-gap col-gap1"> </div> 67 <div class="col-gap col-gap2"> </div> 68 69 <div class="row-gap row-gap1"> </div> 70 <div class="row-gap row-gap2"> </div>