grid-max-sizing-flex-005.html (3425B)
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: Testing track flex max-sizing</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> 10 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks"> 11 <link rel="match" href="grid-max-sizing-flex-005-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } 14 15 body { width: 800px; } 16 .grid { 17 display: grid; 18 grid-auto-rows: minmax(0,1fr); 19 border: 3px dashed blue; 20 width: 720px; 21 } 22 23 .c1 { grid-column: 1 / span 2; min-height:8px; } 24 .r1 { grid-column: 2 / span 3; } 25 .c3 { grid-column: 3 / span 1; } 26 27 span { 28 background: gray; 29 padding: 1px 3px; 30 margin: 1px 5px; 31 justify-self: flex-start; 32 } 33 34 </style> 35 </head> 36 <body> 37 38 <div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> 39 <span class="c1"></span> 40 <span class="r1"></span> 41 <span class="c3"></span> 42 </div> 43 44 <div class="grid" style="grid-template-columns: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr) minmax(0,0.2fr) minmax(0,0.1fr) ;"> 45 <span class="c1"></span> 46 <span class="r1"></span> 47 <span class="c3"></span> 48 </div> 49 50 <div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> 51 <span class="c1"></span> 52 <span class="r1"></span> 53 <span class="c3"></span> 54 </div> 55 56 <div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> 57 <span class="c1"></span> 58 <span class="c1"></span> 59 <span class="c1"></span> 60 <span class="r1"></span> 61 <span class="c3"></span> 62 </div> 63 64 <div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(320px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> 65 <span class="c1"></span> 66 <span class="r1"></span> 67 <span class="c3"></span> 68 </div> 69 70 <div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(400px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(322px,1fr) ;"> 71 <span class="c1"></span> 72 <span class="r1"></span> 73 <span class="c3"></span> 74 </div> 75 76 <div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(722px,1fr) ;"> 77 <span class="c1"></span> 78 <span class="r1"></span> 79 <span class="c3"></span> 80 </div> 81 82 <!-- test some extreme flex values: --> 83 84 <div class="grid" style="grid-template-columns: minmax(10px,9999999999999999999999999999999999999999999999999999999fr);"> 85 <span class="c1"></span> 86 </div> 87 88 <div class="grid" style="grid-template-columns: minmax(10px,99999999999999999999999999999999999fr);"> 89 <span class="c1"></span> 90 </div> 91 92 <div class="grid" style="grid-template-columns: minmax(10px,0.000000000000000000000000001fr);"> 93 <span class="c1"></span> 94 </div> 95 96 <div class="grid" style="width:auto; grid-template-columns: minmax(10px,9999999999999999999999999999999999999999999999999999999fr);"> 97 <span class="c1"></span> 98 </div> 99 100 <div class="grid" style="width:auto; grid-template-columns: minmax(10px,99999999999999999999999999999999999fr);"> 101 <span class="c1"></span> 102 </div> 103 104 <div class="grid" style="width:auto; grid-template-columns: minmax(10px,0.000000000000000000000000001fr);"> 105 <span class="c1"></span> 106 </div> 107 108 </body> 109 </html>