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