grid-gap-decorations-004-ref.html (1067B)
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 height: 108px; 11 width: 108px; 12 display: grid; 13 grid-template-columns: repeat(2, 1fr); 14 column-gap: 12px; 15 row-gap: 12px; 16 background-color: green; 17 18 } 19 20 .grid-item { 21 background: skyblue; 22 } 23 24 .col-rule { 25 margin: 0px; 26 padding: 0px; 27 width: 0px; 28 29 30 height: 108px; 31 border-right: 12px double; 32 border-color: pink; 33 position: absolute; 34 left: 48px; 35 top: 0px; 36 37 } 38 39 .row-rule { 40 margin: 0px; 41 padding: 0px; 42 height: 0px; 43 44 width: 108px; 45 border-bottom: 12px double; 46 border-color: pink; 47 position: absolute; 48 top: 48px; 49 } 50 </style> 51 <div class="grid-container"> 52 <div class="grid-item"></div> 53 <div class="grid-item"></div> 54 <div class="grid-item"></div> 55 <div class="grid-item"></div> 56 </div> 57 58 <div class="row-rule"> </div> 59 <div class="col-rule"> </div>