grid-align-baseline-grid-003.html (3966B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> 3 <style> 4 .target { 5 display: grid; 6 grid-auto-flow: column; 7 position: relative; 8 line-height: 0; 9 font-size: 20px; 10 inline-size: 300px; 11 margin-block: 10px; 12 padding: 10px; 13 border: solid 3px; 14 writing-mode: vertical-lr; 15 } 16 17 .inner { 18 display: grid; 19 gap: 10px; 20 grid-template: 50px 50px / 50px 50px 50px; 21 border: solid 5px; 22 padding: 10px; 23 } 24 25 .inner > div:first-child, 26 .inner > div:last-child { 27 align-self: start; 28 } 29 30 span { 31 display: inline-block; 32 width: 1em; 33 height: 1em; 34 outline: solid cyan 3px; 35 outline-offset: -3px; 36 } 37 </style> 38 <script src="/resources/testharness.js"></script> 39 <script src="/resources/testharnessreport.js"></script> 40 <script src="/resources/check-layout-th.js"></script> 41 <body onload="checkLayout('.target > *')"> 42 43 <div class="target" style="align-items: first baseline;"> 44 <div data-offset-x="30"><span></span></div> 45 <div class="inner" style="align-items: first baseline;" data-offset-x="10"> 46 <div style="font-size: 20px;"><span></span></div> 47 <div style="font-size: 10px;"><span></span></div> 48 <div style="font-size: 30px;"><span></span></div> 49 <div style="font-size: 15px;"><span></span></div> 50 <div style="font-size: 35px;"><span></span></div> 51 <div style="font-size: 25px;"><span></span></div> 52 </div> 53 </div> 54 55 <div class="target" style="align-items: last baseline;"> 56 <div data-offset-x="93"><span></span></div> 57 <div class="inner" style="align-items: first baseline;" data-offset-x="10"> 58 <div style="font-size: 20px;"><span></span></div> 59 <div style="font-size: 10px;"><span></span></div> 60 <div style="font-size: 30px;"><span></span></div> 61 <div style="font-size: 15px;"><span></span></div> 62 <div style="font-size: 35px;"><span></span></div> 63 <div style="font-size: 25px;"><span></span></div> 64 </div> 65 </div> 66 67 <div class="target" style="align-items: first baseline;"> 68 <div data-offset-x="50"><span></span></div> 69 <div class="inner" style="align-items: last baseline;" data-offset-x="10"> 70 <div style="font-size: 20px;"><span></span></div> 71 <div style="font-size: 10px;"><span></span></div> 72 <div style="font-size: 30px;"><span></span></div> 73 <div style="font-size: 15px;"><span></span></div> 74 <div style="font-size: 35px;"><span></span></div> 75 <div style="font-size: 25px;"><span></span></div> 76 </div> 77 </div> 78 79 <div class="target" style="align-items: last baseline;"> 80 <div data-offset-x="108"><span></span></div> 81 <div class="inner" style="align-items: last baseline;" data-offset-x="10"> 82 <div style="font-size: 20px;"><span></span></div> 83 <div style="font-size: 10px;"><span></span></div> 84 <div style="font-size: 30px;"><span></span></div> 85 <div style="font-size: 15px;"><span></span></div> 86 <div style="font-size: 35px;"><span></span></div> 87 <div style="font-size: 25px;"><span></span></div> 88 </div> 89 </div> 90 91 <div class="target" style="align-items: first baseline;"> 92 <div data-offset-x="25"><span></span></div> 93 <div class="inner" style="align-items: end;" data-offset-x="10"> 94 <div style="font-size: 20px;"><span></span></div> 95 <div style="font-size: 10px;"><span></span></div> 96 <div style="font-size: 30px;"><span></span></div> 97 <div style="font-size: 15px;"><span></span></div> 98 <div style="font-size: 35px;"><span></span></div> 99 <div style="font-size: 25px;"><span></span></div> 100 </div> 101 </div> 102 103 <div class="target" style="align-items: last baseline;"> 104 <div data-offset-x="88"><span></span></div> 105 <div class="inner" style="align-items: end;" data-offset-x="10"> 106 <div style="font-size: 20px;"><span></span></div> 107 <div style="font-size: 10px;"><span></span></div> 108 <div style="font-size: 30px;"><span></span></div> 109 <div style="font-size: 15px;"><span></span></div> 110 <div style="font-size: 35px;"><span></span></div> 111 <div style="font-size: 25px;"><span></span></div> 112 </div> 113 </div>