subgrid-baseline-008.html (2627B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-grid-2/"> 3 <style> 4 .item { 5 inline-size: 40px; 6 box-sizing: border-box; 7 border: solid 5px hotpink; 8 line-height: 0; 9 margin-block-start: 3px; 10 margin-block-end: 5px; 11 } 12 .small { 13 width: 20px; 14 height: 20px; 15 border: solid 5px cyan; 16 } 17 .first { 18 align-self: baseline; 19 } 20 .last { 21 align-self: last baseline; 22 } 23 .item.small.first { 24 block-size: 50px; 25 } 26 .item.small.last { 27 block-size: 100px; 28 } 29 span { 30 width: 20px; 31 height: 20px; 32 box-sizing: border-box; 33 border: solid 5px orange; 34 display: inline-block; 35 } 36 </style> 37 <script src="/resources/testharness.js"></script> 38 <script src="/resources/testharnessreport.js"></script> 39 <script src="/resources/check-layout-th.js"></script> 40 <body onload="checkLayout('.item')"> 41 42 <div style="writing-mode: vertical-rl; width: 600px; position: relative; display: grid; grid-template: auto auto auto / 100px 100px 100px 100px;"> 43 <div style="display: grid; 44 gap: 10px; 45 grid-column: 1 / span 2; 46 grid-row: 1 / span 3; 47 grid-template: subgrid / subgrid; 48 margin-block-start: 5px; margin-block-end: 10px; 49 border: solid black 5px; 50 padding-block-start: 10px; padding-block-end: 20px;"> 51 <div style="display: grid; 52 gap: 20px; 53 grid-column: 1 / span 2; 54 grid-row: 1 / span 2; 55 grid-template: subgrid / subgrid; 56 margin-block-start: 3px; margin-block-end: 7px; 57 border: solid black 5px; 58 padding-block-start: 5px; padding-block-end: 10px;"> 59 <div data-offset-x="514" class="item first"> 60 <span></span><br><span></span> 61 </div> 62 <div data-offset-x="428" class="item last"> 63 <span></span><br><span></span> 64 </div> 65 <div data-offset-x="325" class="item first"> 66 <span></span><br><span></span> 67 </div> 68 <div data-offset-x="234" class="item last"> 69 <span></span><br><span></span> 70 </div> 71 </div> 72 <div data-offset-x="131" class="item first"> 73 <span></span><br><span></span> 74 </div> 75 <div data-offset-x="40" class="item last"> 76 <span></span><br><span></span> 77 </div> 78 </div> 79 <div data-offset-x="524" class="item small first"></div> 80 <div data-offset-x="393" class="item small last"></div> 81 <div data-offset-x="335" class="item small first"></div> 82 <div data-offset-x="199" class="item small last"></div> 83 <div data-offset-x="141" class="item small first"></div> 84 <div data-offset-x="5" class="item small last"></div> 85 </div>