grid-gap-decorations-022.html (976B)
1 <!DOCTYPE html> 2 <title> 3 CSS Gap Decorations: Painting grid gaps with bi-directional `rule-color` shorthand. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#propdef-rule-color"> 6 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 7 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 8 <style> 9 .grid-container { 10 display: grid; 11 grid-template-columns: repeat(3, 1fr); 12 gap: 10px; 13 height: 100px; 14 width: 100px; 15 background: red; 16 rule-color: green; 17 rule-width: 10px; 18 rule-style: solid; 19 } 20 21 .grid-item { 22 background: green; 23 } 24 </style> 25 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 26 <div class="grid-container"> 27 <div class="grid-item"></div> 28 <div class="grid-item"></div> 29 <div class="grid-item"></div> 30 <div class="grid-item"></div> 31 <div class="grid-item"></div> 32 <div class="grid-item"></div> 33 </div>