row-initial-flow-tolerance-ref.html (1031B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="stylesheet" href="/fonts/ahem.css"> 4 <style> 5 .grid { 6 display: grid; 7 background: gray; 8 font: 50px/1 Ahem; 9 grid-template-rows: repeat(2, 1fr); 10 gap: 20px; 11 padding: 20px; 12 width: 170px; 13 } 14 15 .auto-item { 16 padding: 10px; 17 height: 100px; 18 } 19 20 .auto-item:nth-of-type(1) { 21 background: lightskyblue; 22 grid-column: 1; 23 } 24 25 .auto-item:nth-of-type(2) { 26 background: lightcoral; 27 grid-column: 1; 28 } 29 30 .auto-item:nth-of-type(3) { 31 background: palegoldenrod; 32 grid-column: 2; 33 transform: translateX(-50px); 34 } 35 36 .auto-item:nth-of-type(4) { 37 background: lightgreen; 38 grid-column: 2; 39 grid-row: 1; 40 } 41 </style> 42 <body> 43 <p>Test that the initial tie threshold for grid-lanes is correctly resolved.</p> 44 <div class="grid"> 45 <div class="auto-item" style="width: 80px"></div> 46 <div class="auto-item" style="width: 30px"></div> 47 <div class="auto-item" style="width: 80px"></div> 48 <div class="auto-item" style="width: 30px"></div> 49 </div> 50 </body> 51 </html>