column-auto-placement-001-ref.html (1567B)
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: 100px 100px 100px; 10 width: 340px; 11 gap: 20px; 12 padding: 20px; 13 align-items: start; 14 } 15 16 .flex { 17 display: flex; 18 flex-direction: column; 19 overflow: visible; 20 flex-wrap: nowrap; 21 gap: 20px; 22 } 23 24 .grid-auto-item-1 { 25 background: lightskyblue; 26 padding: 10px; 27 } 28 29 .grid-auto-item-2 { 30 background: lightcoral; 31 padding: 10px; 32 } 33 34 .grid-auto-item-3 { 35 background: lightgreen; 36 padding: 10px; 37 } 38 39 .grid-auto-item-4 { 40 background: lightpink; 41 padding: 10px; 42 width: 200%; 43 transform: translateX(-120px); 44 } 45 </style> 46 <body> 47 <p>Test that grid-lanes items with auto placement are correctly positioned within the grid axis.</p> 48 <div class="grid"> 49 <div class="flex"> 50 <div class="grid-auto-item-1" style="grid-column: 1">This is some text</div> 51 </div> 52 <div class="flex"> 53 <div class="grid-auto-item-2" style="grid-column: 2">Some larger words in this sentence</div> 54 <div class="grid-auto-item-4" style="grid-column: 2">The cat still cannot be separated from milk</div> 55 <div class="grid-auto-item-4" style="grid-column: 2">The cat still cannot be separated from milk</div> 56 </div> 57 <div class="flex"> 58 <div class="grid-auto-item-3" style="grid-column: 3">The cat cannot be separated from milk</div> 59 </div> 60 </div> 61 </body> 62 </html>