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