flow-tolerance-row-003.html (1186B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Grid Test: Grid Lanes layout with flow-tolerance: 51px (row direction)</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-row-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 grid-lanes-direction: row; 16 grid-auto-flow: column; 17 gap: 10px; 18 grid-template-rows: repeat(3, 100px); 19 flow-tolerance: 51px; /* Tracks within 51px are considered equal */ 20 color: #444; 21 border: 1px solid; 22 padding: 2px; 23 } 24 25 item { 26 background-color: #444; 27 color: #fff; 28 padding: 10px; 29 margin: 3px; 30 border: 2px solid blue; 31 } 32 </style> 33 </head> 34 <body> 35 36 <grid> 37 <item style="width: 150px">1</item> 38 <item style="width: 100px">2</item> 39 <item style="width: 90px">3</item> 40 <item style="width: 100px">4</item> 41 <item style="width: 110px">5</item> 42 <item style="width: 50px">6</item> 43 </grid> 44 45 </body> 46 </html>