flow-tolerance-column-002.html (1108B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Grid Test: Grid Lanes layout with flow-tolerance: normal</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-002-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: normal; /* Should resolve to 1em (16px) */ 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: 70px">1</item> 36 <item style="height: 50px">2</item> 37 <item style="height: 30px">3</item> 38 <item style="height: 70px">4</item> 39 <item style="height: 50px">5</item> 40 <item style="height: 30px">6</item> 41 </grid> 42 43 </body> 44 </html>