column-flow-tolerance-infinite-ref.html (1377B)
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: 15px/1 Ahem; 9 grid-template-columns: repeat(4, 1fr); 10 gap: 20px; 11 padding: 20px; 12 width: 380px; 13 } 14 15 .auto-item { 16 padding: 10px; 17 width: 50px; 18 background: lightskyblue; 19 } 20 21 .flex { 22 gap: 20px; 23 display: flex; 24 flex-direction: column; 25 } 26 </style> 27 <body> 28 <p>Test that the infinite tie threshold for grid-lanes is correctly resolved.</p> 29 <div class="grid"> 30 <div class="flex"> 31 <div class="auto-item" style="height: 40px">1</div> 32 <div class="auto-item" style="height: 40px">5</div> 33 <div class="auto-item" style="height: 40px">9</div> 34 </div> 35 <div class="flex"> 36 <div class="auto-item" style="height: 30px">2</div> 37 <div class="auto-item" style="height: 30px">6</div> 38 <div class="auto-item" style="height: 30px">10</div> 39 </div> 40 <div class="flex"> 41 <div class="auto-item" style="height: 20px">3</div> 42 <div class="auto-item" style="height: 20px">7</div> 43 <div class="auto-item" style="height: 20px">11</div> 44 </div> 45 <div class="flex"> 46 <div class="auto-item" style="height: 10px">4</div> 47 <div class="auto-item" style="height: 10px">8</div> 48 <div class="auto-item" style="height: 10px">12</div> 49 </div> 50 </div> 51 </body> 52 </html>