grid-self-alignment-baseline-with-grid-001-ref.html (1387B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: baseline align a display:block item with a display:grid item</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 11 <style> 12 html,body { 13 color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; 14 } 15 16 .grid { 17 display: grid; 18 grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px; 19 place-content: start; 20 place-items: baseline start; 21 border: 1px solid; 22 text-decoration: underline blue; 23 } 24 25 .inner-grid { 26 background: lightgrey; 27 grid-column: 2; 28 grid-row: 3; 29 min-width: 10px; 30 min-height: 0; 31 border: 0 solid lightblue; 32 border-top-width: 10px; 33 border-bottom-width: 40px; 34 padding-bottom: 20px; 35 } 36 37 x, z { 38 display: block; 39 min-width: 40px; 40 min-height: 10px; 41 font-size: 10em; 42 background: silver; 43 } 44 z { 45 width: 40px; 46 height: 10px; 47 } 48 49 </style> 50 </head> 51 <body> 52 53 <div class="grid"> 54 <y style="grid-area:3/1">A </y> 55 <div class="inner-grid"> 56 <x> A</x><z></z> 57 </div> 58 </div> 59 60 <div class="grid" style="align-items:last baseline"> 61 <y style="grid-area:3/1">A </y> 62 <div class="inner-grid"> 63 <z></z><x> A</x> 64 </div> 65 </div> 66 67 </body> 68 </html>