subgrid-baseline-005.html (2505B)
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 span { 24 width: 20px; 25 height: 20px; 26 box-sizing: border-box; 27 border: solid 5px orange; 28 display: inline-block; 29 } 30 </style> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/resources/check-layout-th.js"></script> 34 <body onload="checkLayout('.item')"> 35 36 <div style="position: relative; display: grid; grid-template: 150px 150px 150px / 100px 100px 100px 100px;"> 37 <div style="display: grid; 38 gap: 10px; 39 grid-column: 1 / span 2; 40 grid-row: 1 / span 3; 41 grid-template: subgrid / subgrid; 42 margin-block-start: 5px; margin-block-end: 10px; 43 border: solid black 5px; 44 padding-block-start: 10px; padding-block-end: 20px;"> 45 <div style="display: grid; 46 gap: 20px; 47 grid-column: 1 / span 2; 48 grid-row: 1 / span 2; 49 grid-template: subgrid / subgrid; 50 margin-block-start: 3px; margin-block-end: 7px; 51 border: solid black 5px; 52 padding-block-start: 5px; padding-block-end: 10px;"> 53 <div data-offset-y="36" class="item first"> 54 <span></span><br><span></span> 55 </div> 56 <div data-offset-y="85" class="item last"> 57 <span></span><br><span></span> 58 </div> 59 <div data-offset-y="163" class="item first"> 60 <span></span><br><span></span> 61 </div> 62 <div data-offset-y="218" class="item last"> 63 <span></span><br><span></span> 64 </div> 65 </div> 66 <div data-offset-y="308" class="item first"> 67 <span></span><br><span></span> 68 </div> 69 <div data-offset-y="360" class="item last"> 70 <span></span><br><span></span> 71 </div> 72 </div> 73 <div data-offset-y="41" class="item small first"></div> 74 <div data-offset-y="110" class="item small last"></div> 75 <div data-offset-y="168" class="item small first"></div> 76 <div data-offset-y="243" class="item small last"></div> 77 <div data-offset-y="313" class="item small first"></div> 78 <div data-offset-y="385" class="item small last"></div> 79 </div>