grid-container-baselines-003-ref.html (4226B)
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: Grid container baselines, nested flex/grid/table</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204"> 10 <link rel="stylesheet" type="text/css" href="support/ahem.css"> 11 <style type="text/css"> 12 html,body { 13 color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; 14 } 15 16 .ib { 17 display: inline-table; 18 height: 163px; 19 width: 120px; 20 border: 1px solid; 21 margin: 1px; 22 } 23 .ib2 { 24 display: inline-flex; 25 border: 1px solid; 26 margin: 1px; 27 } 28 29 span { display: inline-table; } 30 .a { 31 border: 3px solid black; 32 background:lime; 33 } 34 35 span:nth-of-type(1) { font-size:32px; } 36 span:nth-of-type(2) { font-size:36px; } 37 span:nth-of-type(3) { font-size:48px; } 38 span:nth-of-type(4) { font-size:24px; } 39 span.i { font-size:12px; grid-column:2; } 40 .f { display:inline-flex; } 41 42 .hl { writing-mode: horizontal-tb; direction:ltr; } 43 .hr { writing-mode: horizontal-tb; direction:rtl; } 44 .vl { writing-mode: vertical-lr; text-orientation: sideways; } 45 .vr { writing-mode: vertical-rl; text-orientation: sideways; } 46 .vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } 47 .vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } 48 49 .igrid { 50 display: inline-grid; 51 grid: 13px repeat(3,50px) / 60px 60px; 52 border: 1px solid; 53 margin: 1px; 54 } 55 /* don't clamp grid item automatic minimum size */ 56 * { 57 min-width: 0; 58 min-height: 0; 59 } 60 .slb { align-self:last baseline; align-content:self-end; } 61 62 </style> 63 </head> 64 <body> 65 66 A<div class="ib"> 67 <div class="ib" style="height:120px; width:56px;"><span 68 class="a f" style="width:30px; padding-bottom:5px;">A<br>B</span> 69 </div><span class="i a f" style="width:54px">C<br>D</span> 70 </div></div> 71 72 <div class="ib" style="width:180px;"> 73 <div class="ib" style="height:120px; width:56px;"><span 74 class="a f" style="width:30px; padding-top:5px; margin-top:7px">A<br>B</span> 75 </div><span class="i a f" style="width:54px">C<br>D</span><span 76 class="a f" style="width:54px; padding-top:20px">E<br>F</span> 77 </div> 78 79 <div class="ib" style="width:180px;"> 80 <div class="ib" style="height:120px; width:56px;"><span 81 class="a f" style="width:30px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span> 82 </div><span class="i a f" style="width:54px">C<br>D</span><span 83 class="a f" style="width:54px; padding-top:20px">E<br>F</span> 84 </div> 85 86 87 <div class="ib" style="width:200px;"> 88 <div class="ib" style="height:120px; width:76px; white-space:nowrap"><span 89 class="a f" style="width:30px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span><span 90 class="a f" style="float:right; width:30px; position:relative; left:-4px; padding-bottom:22px;">A<br>B</span> 91 </div><span class="i a f" style="width:54px">C<br>D</span><span 92 class="a f" style="width:54px; padding-top:20px;">E<br>F</span> 93 </div> 94 95 <br> 96 97 <x style="position:relative; top:-64px">A</x><div class="ib" style="width:200px;margin-top:32px"> 98 <div class="ib vl" style="height:70px; width:196px;"> 99 <span class="a" style="display:block; padding-block-end:15px; height:1px">A<br>B</span> 100 </div> 101 </div><div class="ib" style="width:200px"> 102 <div class="ib vl" style="height:70px; width:196px;"> 103 <span class="a" style="display:block; padding-block-end:15px; width:148px; height:1px">A<br>B</span> 104 </div> 105 </div><div class="ib" style="width:200px;position:relative; top:-31px"> 106 <div class="ib vl" style="height:70px; width:196px;"> 107 <span class="a" style="display:block; height:min-content; padding-block-end:15px; width:148px; height:min-content">A<br>B</span> 108 </div> 109 </div> 110 111 <br> 112 113 A<div class="igrid slb"> 114 <div class="igrid slb" style="grid: 7px 13px 100px / 36px 3px; grid-row: span 4;"> 115 <n></n> 116 <n style="grid-row:2"></n> 117 <span class="slb a" style="margin-bottom:7px; padding-bottom:5px; grid-row:3; display:inline-block">A<br>B</span> 118 </div> 119 <span class="slb i a" style="grid-row:4; display:inline-block">C<br>D</span> 120 <n></n> 121 </div> 122 123 </body> 124 </html>