flow-tolerance-column-003.html (1119B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Grid Test: Grid Lanes layout with flow-tolerance: 51px</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-003-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(3, 100px); 17 flow-tolerance: 51px; /* Tracks within 51px are considered equal */ 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: 150px">1</item> 36 <item style="height: 100px">2</item> 37 <item style="height: 90px">3</item> 38 <item style="height: 100px">4</item> 39 <item style="height: 110px">5</item> 40 <item style="height: 50px">6</item> 41 </grid> 42 43 </body> 44 </html>