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