subgrid-baseline-002-ref.html (1068B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>Reference: baseline-aligned subgrid item with orthogonal writing-mode</title> 5 <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <style> 8 html,body { 9 color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; 10 } 11 12 .grid { 13 display: grid; 14 grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px; 15 place-content: start; 16 place-items: baseline start; 17 border: 1px solid; 18 text-decoration: underline blue; 19 } 20 21 .subgrid { 22 background: lightgrey; 23 grid-column: 2 / span 4; 24 grid-row: 3 / span 2; 25 min-width: 10px; 26 min-height: 0; 27 background: yellow; 28 } 29 30 x, z { 31 display: block; 32 min-width: 20px; 33 min-height: 10px; 34 font-size: 8em; 35 background: silver; 36 } 37 z { 38 width: 20px; 39 height: 10px; 40 } 41 42 </style> 43 </head> 44 <body> 45 46 <div class="grid"> 47 <y style="grid-area:3/1">A </y> 48 <div class="subgrid"> 49 <z></z><x style="margin-left: 20px"> A</x> 50 </div> 51 </div> 52 53 </body> 54 </html>