row-auto-placement-002-ref.html (1477B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 5 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 6 <style> 7 .grid { 8 display: grid; 9 background: gray; 10 grid-template-rows: auto auto auto; 11 grid-template-columns: auto auto auto; 12 width: 870px; 13 gap: 20px; 14 padding: 20px; 15 align-items: start; 16 font: 15px/1 "Ahem"; 17 } 18 19 .grid > div { 20 width: max-content; 21 } 22 23 .grid-auto-item-1 { 24 background: lightskyblue; 25 padding: 10px; 26 } 27 28 .grid-auto-item-2 { 29 background: lightcoral; 30 padding: 10px; 31 } 32 33 .grid-auto-item-3 { 34 background: lightgreen; 35 padding: 10px; 36 } 37 38 .grid-auto-item-4 { 39 background: lightpink; 40 padding: 10px; 41 grid-row: 1 / 3; 42 align-self: stretch; 43 transform: translateX(-3em); 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="grid-auto-item-1" style="grid-row: 1;">This is some text</div> 50 <div class="grid-auto-item-2" style="grid-row: 2;">Some larger words in this sentence</div> 51 <div class="grid-auto-item-3" style="grid-row: 3;">The cat cannot be separated from milk</div> 52 <div class="grid-auto-item-4">The cat still cannot be separated from milk</div> 53 <div class="grid-auto-item-4">The cat still cannot be separated from milk</div> 54 </div> 55 </body> 56 </html>