flow-tolerance-column-004.html (1031B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Grid Test: Grid Lanes layout with flow-tolerance: infinite</title> 5 <link rel="author" title="Apple Inc."> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#placement-tolerance"> 7 <link rel="match" href="flow-tolerance-column-004-ref.html"> 8 <style> 9 html,body { 10 color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; 11 } 12 13 grid { 14 display: inline-grid-lanes; 15 gap: 10px; 16 grid-template-columns: repeat(2, 100px); 17 flow-tolerance: infinite; /* Always place in order */ 18 color: #444; 19 border: 1px solid; 20 padding: 2px; 21 } 22 23 item { 24 background-color: #444; 25 color: #fff; 26 padding: 10px; 27 margin: 3px; 28 border: 2px solid blue; 29 } 30 </style> 31 </head> 32 <body> 33 34 <grid> 35 <item style="height: 100px">1</item> 36 <item style="height: 50px">2</item> 37 <item style="height: 50px">3</item> 38 <item style="height: 100px">4</item> 39 </grid> 40 41 </body> 42 </html>