grid-gap-decorations-027-ref.html (1323B)
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 .grid-container { 9 display: grid; 10 grid-gap: 10px; 11 grid-template-columns: 100px 100px 100px; 12 height: 320px; 13 } 14 .item { 15 background: gray; 16 opacity: 0.5; 17 } 18 .row-gap { 19 position: absolute; 20 width: 320px; 21 height: 0px; 22 border-bottom: solid 5px green; 23 } 24 .row-gap1 { 25 top: 102.5px; 26 } 27 .row-gap2 { 28 top: 212.5px; 29 } 30 .col-gap { 31 position: absolute; 32 top: 0px; 33 width: 0px; 34 height: 320px; 35 border-left: solid 5px; 36 37 } 38 .gap-link:visited .col-gap { 39 border-left-color: currentColor; 40 } 41 .col-gap1 { 42 left: 102.5px; 43 } 44 .col-gap2 { 45 left: 212.5px; 46 } 47 </style> 48 <div class="grid-container"> 49 <div class="item"></div> 50 <div class="item"></div> 51 <div class="item"></div> 52 <div class="item"></div> 53 <div class="item"></div> 54 <div class="item"></div> 55 <div class="item"></div> 56 <div class="item"></div> 57 <div class="item"></div> 58 </div> 59 <a href="" class="gap-link"> 60 <div class="col-gap col-gap1"> </div> 61 <div class="col-gap col-gap2"> </div> 62 </a> 63 <div class="row-gap row-gap1"> </div> 64 <div class="row-gap row-gap2"> </div>