1553824.html (1293B)
1 <body onload="test()"> 2 <script> 3 function test() { 4 document.body.offsetWidth; 5 let grid = document.querySelector(".container"); 6 grid.style = "grid-template-columns:none"; 7 } 8 </script> 9 10 <style> 11 body { 12 font: 1.2em Arial, Verdana, sans-serif; 13 background-color: #fff; 14 } 15 16 .container { 17 display: grid; 18 gap: 10px; 19 grid-template-columns: 1fr 1fr 1fr 1fr; 20 grid-template-rows: auto auto auto; 21 } 22 23 header, 24 footer, 25 aside, 26 li,.box { 27 background-color: rgb(120, 70, 123); 28 border: 5px solid rgb(88, 55, 112); 29 color: #fff; 30 border-radius: 5px; 31 padding: 20px; 32 } 33 34 aside { 35 grid-row: 1 / -1; 36 grid-column: 1; 37 } 38 39 header { 40 grid-column: 2 / -2; 41 } 42 43 ul { 44 gap: 10px; 45 grid-row: 2; 46 grid-column: 2 / -1; 47 margin: 0; 48 padding: 0; 49 list-style: none; 50 display: grid; 51 grid-template-columns: subgrid; 52 } 53 54 footer { 55 grid-row: 3; 56 grid-column: 2 / -1; 57 } 58 59 .box { 60 grid-column: -2; 61 grid-row:1; 62 } 63 64 </style> 65 66 67 <div class="container"> 68 <header>This is my header</header> 69 <div class="box"></div> 70 <aside>I should stretch from the top to the bottom of the grid</aside> 71 <ul> 72 <li>A</li> 73 <li>B</li> 74 <li>C</li> 75 <li>D</li> 76 <li>E</li> 77 <li>F</li> 78 <li>G</li> 79 <li>H</li> 80 <li>I</li> 81 <li>J</li> 82 <li>K</li> 83 </ul> 84 <footer>I am a footer</footer> 85 </div>