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