grid-flex-min-sizing-003-ref.html (1171B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: flex/auto min-sizing</title> 9 <style type="text/css"> 10 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } 11 12 .grid { 13 display: grid; 14 border: 1px solid; 15 float: left; 16 } 17 18 .g0 { 19 display: grid; 20 grid-template-columns: minmax(min-content,min-content); 21 border:1px solid; 22 float: left; 23 margin-right: 20px; 24 } 25 26 .g8 { 27 grid-template-columns: minmax(min-content,1fr) 28 minmax(min-content,0) 29 minmax(min-content,0) 30 20px; 31 } 32 33 .t { grid-column: span 3; border:2px solid; } 34 .d1 { grid-column: 1 / span 2; background: grey; } 35 .d3 { grid-column: 3 / span 2; background: blue; } 36 div { min-width:0; min-height:10px; } 37 t { display:inline-block; width:20px; } 38 39 </style> 40 </head> 41 <body> 42 43 <div class="g0"> 44 <div class="g8 grid"> 45 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 46 <div class="d1"></div> 47 <div class="d3"></div> 48 </div> 49 </div> 50 51 </body> 52 </html>