positioned-grid-descendants-017-ref.html (758B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Positioned grid descendants eference file</title> 4 <style> 5 #grid { 6 display: inline-grid; 7 grid-template-columns: 50px 50px; 8 grid-template-rows: 50px 50px; 9 background-color: blue; 10 } 11 #child-1 { 12 grid-area: 1 / 1 / 1 / 1; 13 width: 50px; 14 height: 50px; 15 background-color: hotpink; 16 } 17 #child-2 { 18 grid-area: 2 / 2 / 2 / 2; 19 width: 50px; 20 height: 50px; 21 background-color: green; 22 } 23 #grandchild { 24 width: 25px; 25 height: 25px; 26 background-color: red; 27 } 28 </style> 29 30 <p>Test passes if it matches the reference.</p> 31 32 <div id="grid"> 33 <div id="child-1"></div> 34 <div id="child-2"> 35 <div id="grandchild"></div> 36 </div> 37 </div>