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