grid-gap-decorations-009-ref.html (1416B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> 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 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 .col-gap1 { 22 position: absolute; 23 width: 0; 24 height: 215px; 25 border-left: solid 5px blue; 26 top: 105px; 27 left: 102.5px; 28 } 29 30 31 .col-gap2 { 32 position: absolute; 33 width: 0; 34 height: 105px; 35 top: 0px; 36 left: 212.5px; 37 border-left: solid 5px blue; 38 } 39 40 .row-gap1 { 41 position: absolute; 42 height: 0px; 43 top: 102.5px; 44 left: 0px; 45 width: 320px; 46 border-bottom: solid 5px red; 47 } 48 49 .row-gap2 { 50 position: absolute; 51 height: 0px; 52 top: 212.5px; 53 left: 0px; 54 width: 105px; 55 border-bottom: solid 5px red; 56 57 } 58 </style> 59 <div class="grid-container"> 60 <div class="item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> 61 <div class="item" style=" grid-column: 3 / 4;"></div> 62 <div class="item"></div> 63 <div class="item" style="grid-column: 2 / 4; grid-row: 2 / 4;"></div> 64 <div class="item"></div> 65 </div> 66 67 <div class="col-gap1"></div> 68 <div class="col-gap2"></div> 69 <div class="col-gap3"></div> 70 71 <div class="row-gap1"></div> 72 <div class="row-gap2"></div>