column-explicit-placement-003.html (1560B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="match" href="column-explicit-placement-003-ref.html"> 5 <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> 6 <style> 7 .grid-lanes { 8 display: grid-lanes; 9 grid-lanes-direction: column; 10 background: gray; 11 flow-tolerance: 0; 12 grid-template-columns: auto auto auto; 13 height: 200px; 14 width: 500px; 15 gap: 20px; 16 padding: 20px; 17 } 18 19 .first-track { 20 background: lightskyblue; 21 grid-column-start: 1; 22 writing-mode: vertical-rl; 23 height: max-content; 24 } 25 26 .second-track { 27 background: lightcoral; 28 grid-column-start: 2; 29 width: fit-content; 30 height: fit-content; 31 } 32 33 .third-track { 34 background: lightgreen; 35 grid-column-start: 3; 36 writing-mode: vertical-lr; 37 height: max-content; 38 } 39 </style> 40 <body> 41 <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> 42 <div class="grid-lanes"> 43 <div class="first-track">This is some text</div> 44 <div class="first-track" style="margin-right: 10px;">This is some text</div> 45 <div class="first-track" style="writing-mode: horizontal-tb">This is some text</div> 46 <div class="second-track" style="margin-bottom: 10px;">Some larger words in this sentence</div> 47 <div class="third-track">The cat cannot be separated from milk</div> 48 <div class="third-track">This is some other text</div> 49 </div> 50 </body> 51 </html>