grid-item-mixed-baseline-004.html (2553B)
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>CSS Grid Test: mixed align-content/self:baseline/last baseline in fragmentated grid</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> 10 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content"> 11 <link rel="match" href="grid-item-mixed-baseline-004-ref.html"> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 13 <style type="text/css"> 14 html,body { 15 color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; 16 } 17 18 .columns { 19 position:relative; 20 columns: 5; 21 -ms-columns: 5; 22 -webkit-columns: 5; 23 columns: 5; 24 column-fill: auto; 25 -ms-column-fill: auto; 26 -webkit-column-fill: auto; 27 column-fill: auto; 28 border: 2px dashed; 29 margin-bottom: 5px; 30 height: 120px; 31 } 32 33 .grid { 34 display: grid; 35 grid: 100px / repeat(3, auto); 36 grid-auto-rows: 100px; 37 border: 2px solid; 38 margin: 1px; 39 } 40 41 span { 42 background: lime; 43 display: inline-block; 44 border: 1px solid black; 45 } 46 47 span:nth-child(1) { font-size:30px; } 48 span:nth-child(2) { font-size:15px; } 49 span:nth-child(3) { font-size:10px; } 50 span:nth-child(4) { font-size:20px; } 51 52 .pbs { padding-block-start: 15px; margin-block-start: 5px; } 53 .pbe { padding-block-end: 7px; margin-block-end: 3px; } 54 55 .fb { align-content:baseline; align-self:self-start; justify-self:self-start; } 56 .lb { align-content:last baseline; align-self:self-end; justify-self:self-end; } 57 .s { align-self:stretch; justify-self:stretch; } 58 59 .sfb { align-self:baseline; } 60 .slb { align-self:last baseline; align-content:self-end; } 61 62 .hl { writing-mode: horizontal-tb; direction:ltr; } 63 .hr { writing-mode: horizontal-tb; direction:rtl; } 64 .vl { writing-mode: vertical-lr; text-orientation: sideways; } 65 .vr { writing-mode: vertical-rl; text-orientation: sideways; } 66 .vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } 67 .vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } 68 69 </style> 70 </head> 71 <body> 72 73 <div class="columns"> 74 <div class="grid hl"> 75 <span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span> 76 <span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span> 77 <span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span> 78 </div> 79 </div> 80 81 </body> 82 </html>