positioned-grid-items-024.html (1034B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Positioned grid items</title> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> 5 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 6 <meta name="assert" content="Checks that absolutely positioned items are properly placed and sized."> 7 <style> 8 #grid { 9 display: grid; 10 grid-template-columns: 50px 50px; 11 grid-template-rows: 50px 50px; 12 width: 100px; 13 height: 100px; 14 background-color: red; 15 position: relative; 16 } 17 18 #grid > div { 19 background-color: green; 20 } 21 22 #abspos { 23 position: absolute; 24 margin-top: auto; 25 margin-left: auto; 26 width: 50%; 27 height: 50%; 28 } 29 </style> 30 31 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 32 33 <div id="grid"> 34 <div style="grid-column: 2 / 3; grid-row: 1 / 2;"></div> 35 <div style="grid-column: 1 / 2; grid-row: 2 / 3;"></div> 36 <div style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> 37 <div id="abspos"></div> 38 </div>