<!DOCTYPE HTML> <html><head> <meta charset="utf-8"> <title>Reference: baseline-aligned subgrid item with orthogonal writing-mode</title> <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> <style> html,body { color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; } .grid { display: grid; grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px; place-content: start; place-items: baseline start; border: 1px solid; text-decoration: underline blue; } .subgrid { background: lightgrey; grid-column: 2 / span 4; grid-row: 3 / span 2; min-width: 10px; min-height: 0; background: yellow; } x, z { display: block; min-width: 20px; min-height: 10px; font-size: 8em; background: silver; } z { width: 20px; height: 10px; } </style> </head> <body> <div class="grid"> <y style="grid-area:3/1">A </y> <div class="subgrid"> <z></z><x style="margin-left: 20px"> A</x> </div> </div> </body> </html>