flow-tolerance-row-004-ref.html (1122B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Grid Test: Grid Lanes layout with flow-tolerance: infinite (row direction - reference)</title> 5 <style> 6 html,body { 7 color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; 8 } 9 10 .outer-grid { 11 display: inline-grid; 12 grid-template-rows: repeat(2, auto); 13 row-gap: 10px; 14 column-gap: 0; 15 color: #444; 16 border: 1px solid; 17 padding: 2px; 18 } 19 20 .row { 21 display: grid; 22 grid-auto-flow: column; 23 grid-auto-columns: auto; 24 gap: 10px; 25 } 26 27 item { 28 background-color: #444; 29 color: #fff; 30 padding: 10px; 31 margin: 3px; 32 border: 2px solid blue; 33 height: 70px; 34 box-sizing: content-box; 35 } 36 </style> 37 </head> 38 <body> 39 40 <div class="outer-grid"> 41 <div class="row"> 42 <!-- Row 1 --> 43 <item style="width: 100px;">1</item> 44 <item style="width: 50px;">3</item> 45 </div> 46 <div class="row"> 47 <!-- Row 2 --> 48 <item style="width: 50px;">2</item> 49 <item style="width: 100px;">4</item> 50 </div> 51 </div> 52 53 </body> 54 </html>