grid-aspect-ratio-align-items-center.html (1046B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> 5 <link rel="help" href="https://www.w3.org/TR/2021/WD-css-sizing-4-20210520/#aspect-ratio-automatic"> 6 <meta name="assert" content="Grid has a definite block size computed using the inline size/aspect ratio and item is aligned accordingly (centered vertically)."> 7 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> 8 <style> 9 .grid { 10 display: grid; 11 aspect-ratio: 1/1; 12 align-items: center; 13 position: relative; 14 } 15 .item { 16 width: 100px; 17 height: 50px; 18 background-color: green; 19 } 20 .abspos { 21 position: absolute; 22 width: 100px; 23 height: 25px; 24 background-color: green; 25 align-self: start; 26 z-index: -1; 27 } 28 </style> 29 </head> 30 <body> 31 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 32 <div style="width: 100px"> 33 <div class="grid"> 34 <div class="abspos"></div> 35 <div class="abspos" style="top: 75px;"></div> 36 37 <div class="item"></div> 38 </div> 39 </div> 40 </body> 41 </html>