grid-gap-decorations-045.html (964B)
1 <!DOCTYPE html> 2 <title> 3 CSS Gap Decorations: Make sure decorations resize when container/window resizes. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 6 <link rel="match" href="grid-gap-decorations-045-ref.html"> 7 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 8 <style> 9 #container, 10 body { 11 overflow: hidden; 12 margin: 0px; 13 } 14 15 #container { 16 display: grid; 17 grid-template-rows: 4rem 2rem auto; 18 width: 50%; 19 gap: 2px; 20 border: solid 2px black; 21 row-rule: 2px solid hotpink, 1px dashed grey; 22 background-color: teal; 23 } 24 25 #one { 26 height: 100px; 27 width: 100px; 28 } 29 </style> 30 <div id="container"> 31 <div id="one"></div> 32 </div> 33 <script> 34 window.addEventListener('load', function () { 35 const container = document.getElementById('container'); 36 container.style.width = '80%'; 37 }); 38 </script>