grid-gap-decorations-040-ref.html (1629B)
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 grid-template-columns: repeat(4, 100px); 12 grid-template-rows: repeat(4, 100px); 13 gap: 10px; 14 width: 430px; 15 height: 430px; 16 } 17 18 .grid-item { 19 background-color: gray; 20 opacity: 0.5; 21 border: 1px solid #000; 22 } 23 24 .col-gap { 25 width: 0; 26 border-left: solid 5px blue; 27 } 28 29 .col-gap1 { 30 position: absolute; 31 top: 212.5px; 32 left: 102.5px; 33 height: 217.5px; 34 } 35 36 .col-gap2 { 37 position: absolute; 38 top: 0px; 39 left: 212.5px; 40 height: 430px; 41 } 42 43 .col-gap3 { 44 position: absolute; 45 top: 0px; 46 left: 322.5px; 47 height: 430px; 48 } 49 50 .row-gap { 51 height: 0px; 52 border-bottom: solid 5px red; 53 } 54 55 .row-gap1 { 56 position: absolute; 57 top: 102.5px; 58 left: 325px; 59 width: 105px; 60 } 61 62 .row-gap2 { 63 position: absolute; 64 top: 212.5px; 65 left: 0px; 66 width: 430px; 67 } 68 69 .row-gap3 { 70 position: absolute; 71 top: 322.5px; 72 left: 0px; 73 width: 430px; 74 } 75 </style> 76 77 <div class="grid-container"> 78 <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 3;"></div> 79 <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> 80 </div> 81 82 <div class="col-gap col-gap1"> </div> 83 <div class="col-gap col-gap2"> </div> 84 <div class="col-gap col-gap3"> </div> 85 86 <div class="row-gap row-gap1"> </div> 87 <div class="row-gap row-gap2"> </div> 88 <div class="row-gap row-gap3"> </div>