grid-gap-decorations-020-ref.html (831B)
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 9 .grid-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 column-rule-color: pink; 20 column-rule-style: dotted; 21 column-rule-width: 10px; 22 23 row-rule-color: green; 24 row-rule-style: ridge; 25 row-rule-width: 10px; 26 } 27 28 .grid-item { 29 background: skyblue; 30 } 31 </style> 32 <div class="grid-container"> 33 <div class="grid-item"></div> 34 <div class="grid-item"></div> 35 <div class="grid-item"></div> 36 <div class="grid-item"></div> 37 </div>