row-auto-placement-002.html (1410B)
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="match" href="row-auto-placement-002-ref.html"> 6 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 7 <style> 8 .grid-lanes { 9 display: grid-lanes; 10 background: gray; 11 flow-tolerance: 0; 12 grid-template-rows: auto auto auto; 13 grid-lanes-direction: row; 14 width: 870px; 15 padding: 20px; 16 gap: 20px; 17 font: 15px/1 "Ahem"; 18 } 19 20 .grid-lanes > div { 21 width: max-content; 22 } 23 24 .auto-item { 25 padding: 10px; 26 } 27 28 .auto-item:nth-of-type(1) { 29 background: lightskyblue; 30 } 31 32 .auto-item:nth-of-type(2) { 33 background: lightcoral; 34 } 35 36 .auto-item:nth-of-type(3) { 37 background: lightgreen; 38 } 39 40 .two-track-spanner { 41 background: lightpink; 42 grid-row: span 2; 43 padding: 10px; 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-lanes"> 49 <div class="auto-item">This is some text</div> 50 <div class="auto-item">Some larger words in this sentence</div> 51 <div class="auto-item">The cat cannot be separated from milk</div> 52 <div class="two-track-spanner">The cat still cannot be separated from milk</div> 53 <div class="two-track-spanner">The cat still cannot be separated from milk</div> 54 </div> 55 </body> 56 </html>