column-explicit-placement-003-ref.html (1602B)
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-columns: auto auto auto; 10 height: 200px; 11 width: 500px; 12 gap: 20px; 13 padding: 20px; 14 } 15 16 .first-track { 17 background: lightskyblue; 18 grid-column-start: 1; 19 writing-mode: vertical-rl; 20 height: max-content; 21 } 22 23 .second-track { 24 background: lightcoral; 25 grid-column-start: 2; 26 width: fit-content; 27 height: fit-content; 28 } 29 30 .third-track { 31 background: lightgreen; 32 grid-column-start: 3; 33 writing-mode: vertical-lr; 34 height: max-content; 35 } 36 37 .flex { 38 display: flex; 39 flex-direction: column; 40 gap: 20px; 41 } 42 </style> 43 <body> 44 <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> 45 <div class="grid"> 46 <div class="flex"> 47 <div class="first-track">This is some text</div> 48 <div class="first-track" style="margin-right: 10px;">This is some text</div> 49 <div class="first-track" style="writing-mode: horizontal-tb;">This is some text</div> 50 </div> 51 <div class="second-track" style="margin-bottom: 10px;">Some larger words in this sentence</div> 52 <div class="flex" style="grid-column-start: 3;"> 53 <div class="third-track">The cat cannot be separated from milk</div> 54 <div class="third-track">This is some other text</div> 55 </div> 56 </div> 57 </body> 58 </html>