grid-positioned-item-dynamic-change-005-ref.html (716B)
1 <!DOCTYPE html> 2 <html lang=en> 3 <meta charset="utf-8"> 4 <title>CSS Grid Layout Test: Grid positioned item dynamic change.</title> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> 6 <style> 7 #grid { 8 display: inline-grid; 9 grid-template-columns: 50px 50px; 10 grid-template-rows: 50px 50px; 11 background-color: blue; 12 } 13 #child { 14 grid-area: 2 / 2 / 2 / 2; 15 width: 50px; 16 height: 50px; 17 background-color: green; 18 } 19 #grandchild { 20 width: 25px; 21 height: 25px; 22 background-color: red; 23 } 24 </style> 25 26 <body> 27 28 <p>Test passes if it matches the reference.</p> 29 30 <div id="grid"> 31 <div id="child"> 32 <div id="grandchild"></div> 33 </div> 34 </div> 35 36 </body> 37 38 </html>