grid-align-baseline-004.html (891B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> 3 <style> 4 #target { 5 display: grid; 6 grid-template: 50px 50px 50px / 50px 50px; 7 grid-auto-flow: column; 8 align-items: last baseline; 9 width: 200px; 10 border: solid 3px; 11 position: relative; 12 line-height: 0; 13 font-size: 20px; 14 } 15 span { 16 display: inline-block; 17 width: 1em; 18 height: 1em; 19 outline: solid cyan 3px; 20 outline-offset: -3px; 21 } 22 </style> 23 <script src="/resources/testharness.js"></script> 24 <script src="/resources/testharnessreport.js"></script> 25 <script src="/resources/check-layout-th.js"></script> 26 <body onload="checkLayout('#target > div')"> 27 28 <div id="target"> 29 <div style="grid-area: 3 / 1; margin-bottom: 10px;" data-offset-y="100"><span></span><br><span></span></div> 30 <div style="grid-area: 1 / 2 / 4 / 2;" data-offset-y="100"><span></span><br><span></span></div> 31 </div>