subgrid-baseline-001-ref.html (1047B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>Reference: baseline-aligned subgrid item with padding</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 padding-top: 20px; 29 } 30 31 x, z { 32 display: block; 33 min-width: 20px; 34 min-height: 10px; 35 font-size: 8em; 36 background: silver; 37 } 38 z { 39 width: 20px; 40 height: 10px; 41 } 42 43 </style> 44 </head> 45 <body> 46 47 <div class="grid"> 48 <y style="grid-area:3/1">A </y> 49 <div class="subgrid"> 50 <z></z><x> A</x> 51 </div> 52 </div> 53 54 </body> 55 </html>