grid-gap-decorations-033-ref.html (1286B)
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: repeat(3, 50px); 14 grid-template-rows: repeat(6, 50px); 15 width: 50px; 16 height: 50px; 17 } 18 19 .row-gap { 20 position: absolute; 21 width: 170px; 22 height: 0px; 23 border-bottom: solid 5px red; 24 } 25 26 .row-gap1 { 27 top: 52.5px; 28 } 29 30 .row-gap2 { 31 top: 112.5px; 32 } 33 34 .row-gap3 { 35 top: 172.5px; 36 } 37 38 .row-gap4 { 39 top: 232.5px; 40 } 41 42 .row-gap5 { 43 top: 195px; 44 border-bottom: solid 200px red; /*expand the last row gap's height*/ 45 } 46 47 .col-gap { 48 position: absolute; 49 top: 0px; 50 width: 0px; 51 height: 350px; 52 border-left: solid 10px blue; 53 } 54 55 .col-gap1 { 56 left: 50px; 57 } 58 59 .col-gap2 { 60 left: 110px; 61 } 62 </style> 63 <div class="grid-container"></div> 64 65 <div class="col-gap col-gap1"> </div> 66 <div class="col-gap col-gap2"> </div> 67 68 <div class="row-gap row-gap1"> </div> 69 <div class="row-gap row-gap2"> </div> 70 <div class="row-gap row-gap3"> </div> 71 <div class="row-gap row-gap4"> </div> 72 <div class="row-gap row-gap5"> </div>