grid-flex-min-sizing-003.html (1323B)
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>CSS Grid Test: flex/auto min-sizing</title> 9 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax"> 10 <link rel="match" href="grid-flex-min-sizing-003-ref.html"> 11 <style type="text/css"> 12 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } 13 14 .grid { 15 display: grid; 16 border: 1px solid; 17 } 18 19 .g0 { 20 display: grid; 21 grid-template-columns: minmax(min-content,min-content); 22 border:1px solid; 23 float: left; 24 margin-right: 20px; 25 justify-items: start; 26 } 27 28 .g8 { 29 grid-template-columns: minmax(auto,1fr) 30 minmax(auto,0) 31 minmax(auto,0) 32 20px; 33 } 34 35 .t { grid-column: span 3; border:2px solid; } 36 .d1 { grid-column: 1 / span 2; background: grey; } 37 .d3 { grid-column: 3 / span 2; background: blue; } 38 div { min-width:0; min-height:10px; } 39 t { display:inline-block; width:20px; } 40 41 </style> 42 </head> 43 <body> 44 45 <div class="g0"> 46 <div class="g8 grid"> 47 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 48 <div class="d1"></div> 49 <div class="d3"></div> 50 </div> 51 </div> 52 53 </body> 54 </html>