grid-justify-baseline-004.html (1277B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> 4 <style> 5 #target { 6 display: grid; 7 grid-template-columns: 120px; 8 justify-items: last baseline; 9 width: 200px; 10 border: solid 3px; 11 position: relative; 12 line-height: 0; 13 writing-mode: vertical-rl; 14 } 15 span { 16 display: inline-block; 17 width: 1em; 18 height: 1em; 19 outline: solid cornflowerblue 3px; 20 outline-offset: -3px; 21 } 22 #target > div { 23 flex: none; 24 } 25 #target > :nth-child(1) { 26 background: lime; 27 margin-bottom: 20px; 28 padding-bottom: 20px; 29 font-size: 20px; 30 writing-mode: horizontal-tb; 31 } 32 #target > :nth-child(2) { 33 background: hotpink; 34 font-size: 30px; 35 writing-mode: horizontal-tb; 36 } 37 #target > :nth-child(3) { 38 background: papayawhip; 39 font-size: 10px; 40 } 41 </style> 42 <script src="/resources/testharness.js"></script> 43 <script src="/resources/testharnessreport.js"></script> 44 <script src="/resources/check-layout-th.js"></script> 45 <body onload="checkLayout('#target > div')"> 46 47 <div id="target"> 48 <div data-offset-y="40"><span></span><br><span></span></div> 49 <div data-offset-y="20"><span></span><br><span></span></div> 50 <div data-offset-y="75"><span></span><br><span></span></div> 51 </div>