grid-gap-decorations-010-ref.html (1717B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> 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 height: 320px; 14 } 15 16 .item { 17 background: gray; 18 opacity: 0.5; 19 } 20 21 .row-gap { 22 width: 320px; 23 height: 0px; 24 border-bottom: solid 5px red; 25 } 26 27 .row-gap1 { 28 position: absolute; 29 top: 102.5px; 30 } 31 32 .row-gap2 { 33 position: absolute; 34 top: 212.5px; 35 } 36 37 .col-gap1 { 38 position: absolute; 39 width: 0; 40 display: flex; 41 gap: 10px; 42 flex-direction: column; 43 top: 0px; 44 left: 102.5px; 45 } 46 47 .col-gap1>div { 48 height: 100px; 49 border-left: solid 5px blue; 50 } 51 52 .col-gap2 { 53 position: absolute; 54 width: 0; 55 display: flex; 56 gap: 10px; 57 flex-direction: column; 58 top: 0px; 59 left: 212.5px; 60 } 61 62 .col-gap2>div { 63 height: 100px; 64 border-left: solid 5px blue; 65 } 66 </style> 67 68 <body> 69 <div class="grid-container"> 70 <div class="item"></div> 71 <div class="item"></div> 72 <div class="item"></div> 73 <div class="item"></div> 74 <div class="item"></div> 75 <div class="item"></div> 76 <div class="item"></div> 77 <div class="item"></div> 78 <div class="item"></div> 79 </div> 80 </body> 81 82 <div class="col-gap1"> 83 <div class="col-gap1a"></div> 84 <div class="col-gap1b"></div> 85 <div class="col-gap1c"></div> 86 </div> 87 <div class="col-gap2"> 88 <div class="col-gap2a"></div> 89 <div class="col-gap2b"></div> 90 <div class="col-gap2c"></div> 91 </div> 92 93 <div class="row-gap row-gap1"> </div> 94 <div class="row-gap row-gap2"> </div>