grid-max-sizing-flex-005-ref.html (2847B)
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 .grid { 16 display: grid; 17 grid-auto-rows: 12px; 18 border: 3px dashed blue; 19 width: 720px; 20 } 21 22 .c1 { grid-column: 1 / span 2; } 23 .r1 { grid-column: 2 / span 3; } 24 .c3 { grid-column: 3 / span 1; } 25 26 span { 27 min-height:8px; 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: 80px 160px 240px 160px 80px;"> 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: 72px 144px 216px 144px 72px;"> 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: 400px 80px 120px 80px 40px;"> 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: 400px 80px 120px 80px 40px;"> 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: 400px 320px 0 0 0;"> 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: 0 400px 0 0 322px;"> 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: 0 0 0 0 722px;"> 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,0fr);"> 85 <span class="c1"></span> 86 </div> 87 88 <div class="grid" style="grid-template-columns: minmax(10px,1fr);"> 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:794px; grid-template-columns: minmax(10px,0fr);"> 97 <span class="c1"></span> 98 </div> 99 100 <div class="grid" style="width:794px; grid-template-columns: minmax(10px,1fr);"> 101 <span class="c1"></span> 102 </div> 103 104 <div class="grid" style="width:794px; grid-template-columns: minmax(10px,0.000000000000000000000000001fr);"> 105 <span class="c1"></span> 106 </div> 107 108 </body> 109 </html>