grid-gap-decorations-036-ref.html (1683B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1"> 3 <link rel="author" title="Javier Contreras" href="mailto:javiercon@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 grid-template-rows: 100px 100px 100px; 13 width: 130px; 14 height: 130px; 15 overflow: hidden; 16 background: pink; 17 } 18 .item { 19 background: gray; 20 } 21 .row-gap { 22 position: absolute; 23 width: 320px; 24 height: 0px; 25 border-bottom: solid 5px gold; 26 } 27 .row-gap1 { 28 top: 102.5px; 29 } 30 .row-gap2 { 31 top: 212.5px; 32 } 33 .col-gap { 34 position: absolute; 35 top: 0px; 36 width: 0px; 37 height: 320px; 38 border-left: solid 5px blue; 39 } 40 .col-gap1 { 41 left: 102.5px; 42 } 43 .col-gap2 { 44 left: 212.5px; 45 } 46 .container { 47 position: absolute; 48 top: 0px; 49 left: 0px; 50 width: 130px; 51 height: 130px; 52 overflow: hidden; 53 } 54 </style> 55 <div class="container"> 56 <div class="grid-container"> 57 <div class="item"></div> 58 <div class="item"></div> 59 <div class="item"></div> 60 <div class="item"></div> 61 <div class="item"></div> 62 <div class="item"></div> 63 <div class="item"></div> 64 <div class="item"></div> 65 <div class="item"></div> 66 </div> 67 <div class="col-gap col-gap1"> </div> 68 <div class="col-gap col-gap2"> </div> 69 <div class="row-gap row-gap1"> </div> 70 <div class="row-gap row-gap2"> </div> 71 </div>