grid-gap-decorations-030-ref.html (811B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1"> 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 width: 120px; 14 height: 120px; 15 } 16 17 .item { 18 background: gray; 19 opacity: 0.5; 20 } 21 22 .col-gap { 23 position: absolute; 24 top: 0px; 25 width: 0px; 26 height: 120px; 27 border-left: solid 5px blue; 28 } 29 30 .col-gap1 { 31 left: 102.5px; 32 } 33 34 .col-gap2 { 35 left: 212.5px; 36 } 37 </style> 38 <div class="grid-container"> 39 <div class="item"></div> 40 <div class="item"></div> 41 <div class="item"></div> 42 </div> 43 44 <div class="col-gap col-gap1"> </div> 45 <div class="col-gap col-gap2"> </div>