row-explicit-placement-008-ref.html (1677B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> 5 <style> 6 .grid { 7 display: grid; 8 background: gray; 9 grid-template-rows: repeat(3, 100px); 10 grid-template-columns: repeat(3, 100px); 11 height: 200px; 12 gap: 20px; 13 padding: 20px; 14 } 15 16 .first-track { 17 background: lightskyblue; 18 grid-row-start: 1; 19 writing-mode: vertical-rl; 20 margin-top: 10px; 21 width: fit-content; 22 } 23 24 .second-track { 25 background: lightcoral; 26 grid-row-start: 2; 27 width: max-content; 28 grid-column: span 2; 29 } 30 31 .third-track { 32 background: lightgreen; 33 grid-row-start: 3; 34 writing-mode: vertical-lr; 35 width: fit-content; 36 } 37 38 .flex { 39 display: flex; 40 flex-direction: row; 41 gap: 20px; 42 width: max-content; 43 } 44 </style> 45 <body> 46 <p>Test that orthoganal grid-lanes with explicit placement are correctly positioned within the grid axis and that the margins on the orthogonal items correctly affect track sizing.</p> 47 <div class="grid"> 48 <div class="flex"> 49 <div class="first-track">This is some text</div> 50 <div class="first-track" style="margin-right: 10px;">This is some text</div> 51 <div class="first-track" style="writing-mode: horizontal-tb; width: max-content;">This is some text</div> 52 </div> 53 <div class="second-track" style="margin-bottom: 10px;">Some larger words in this sentence</div> 54 <div class="flex" style="grid-row-start: 3;"> 55 <div class="third-track">The cat cannot be separated from milk</div> 56 <div class="third-track">This is some other text</div> 57 </div> 58 </div> 59 </body> 60 </html>