grid-item-self-baseline-001-ref.html (4871B)
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: align-self/justify-self:baseline/last baseline</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1221525"> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font-size:16px; padding:0; margin:0; 13 } 14 15 .grid { 16 display: grid; 17 grid: auto / repeat(4, auto); 18 align-items: start; 19 justify-items: start; 20 } 21 .c { 22 grid: repeat(4, auto) / auto; 23 } 24 div { 25 float: left; 26 border:2px solid; 27 padding:1px; 28 margin:1px; 29 } 30 span { 31 background: lime; 32 display: inline-block; 33 border: 1px solid black; 34 box-sizing: border-box; 35 } 36 span:nth-child(1) { font-size:12px; } 37 span:nth-child(2) { font-size:16px; } 38 span:nth-child(3) { font-size:24px; } 39 span:nth-child(4) { font-size:32px; } 40 .pbe { padding-block-end:20px; } 41 .pbs { padding-block-start:20px; } 42 43 .fb { align-self:baseline; } 44 .lb { align-self:last baseline; } 45 46 .hl { writing-mode: horizontal-tb; direction:ltr; } 47 .hr { writing-mode: horizontal-tb; direction:rtl; } 48 .vl { writing-mode: vertical-lr; text-orientation: sideways; } 49 .vr { writing-mode: vertical-rl; text-orientation: sideways; } 50 .vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } 51 .vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } 52 53 </style> 54 </head> 55 <body> 56 57 <div><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div> 58 <div><span class="fb hl pbe">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div> 59 <div class="vl"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> 60 <div class="vl"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> 61 <div class="vr"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> 62 <div class="vr"><span class="fb pbe">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> 63 64 <br clear="all"> 65 66 <div><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div> 67 <div><span class="lb hl pbe">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div> 68 <div class="vl"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> 69 <div class="vl"><span class="lb pbs">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> 70 <div class="vr"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> 71 <div class="vr"><span class="lb pbe">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> 72 73 <br clear="all"> 74 75 <div class="grid vl"><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div> 76 <div class="grid vl"><span class="fb vl pbe">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div> 77 <div class="grid"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> 78 <div class="grid"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> 79 <div class="grid"><span class="fb" style="order:99">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div> 80 <div class="grid"><span class="fb pbe" style="order:99;">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div> 81 82 <br clear="all"> 83 84 <div><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div> 85 <div><span class="lb hl pbe">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div> 86 <div class="vl"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> 87 <div class="vl"><span class="lb pbs">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> 88 <div class="vr"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> 89 <div class="vr"><span class="lb pbe">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> 90 91 </body> 92 </html>