grid-gap-decorations-032-ref.html (1222B)
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 overflow: hidden; 8 } 9 10 .grid-container { 11 display: grid; 12 grid-gap: 10px; 13 grid-template-columns: 100px 100px 100px; 14 grid-template-rows: repeat(6, 100px); 15 width: 120px; 16 height: 120px; 17 } 18 19 .row-gap { 20 position: absolute; 21 width: 320px; 22 height: 0px; 23 border-bottom: solid 5px red; 24 } 25 26 .row-gap1 { 27 top: 102.5px; 28 } 29 30 .row-gap2 { 31 top: 212.5px; 32 } 33 34 .row-gap3 { 35 top: 322.5px; 36 } 37 38 .row-gap4 { 39 top: 432.5px; 40 } 41 42 .row-gap5 { 43 top: 542.5px; 44 } 45 46 .col-gap { 47 position: absolute; 48 top: 0px; 49 width: 0px; 50 height: 650px; 51 border-left: solid 10px blue; 52 } 53 54 .col-gap1 { 55 left: 100px; 56 } 57 58 .col-gap2 { 59 left: 210px; 60 } 61 </style> 62 <div class="grid-container"></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> 69 <div class="row-gap row-gap3"> </div> 70 <div class="row-gap row-gap4"> </div> 71 <div class="row-gap row-gap5"> </div>