grid-max-sizing-flex-006.html (2445B)
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-006-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-columns: 40px; 18 border: 3px dashed blue; 19 width: 720px; 20 } 21 22 .c1 { grid-row: 1 / span 2; } 23 .c2 { grid-row: 2 / span 3; } 24 .c3 { grid-row: 3 / span 1; } 25 26 span { 27 background: gray; 28 padding: 1px 3px; 29 margin: 1px 5px; 30 min-height: 5px; 31 justify-self: flex-start; 32 } 33 34 </style> 35 </body> 36 <head> 37 38 <div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> 39 <span class="c1"></span> 40 <span class="c2"></span> 41 <span class="c3"></span> 42 </div> 43 44 <div class="grid" style="grid-template-rows: minmax(0,0.25fr) minmax(0,0.5fr) minmax(0,0.75fr) minmax(0,0.5fr) minmax(0,0.25fr);"> 45 <span class="c1"></span> 46 <span class="c2"></span> 47 <span class="c3"></span> 48 </div> 49 50 <div class="grid" style="grid-template-rows: minmax(9px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> 51 <span class="c1"></span> 52 <span class="c2"></span> 53 <span class="c3"></span> 54 </div> 55 56 <div class="grid" style="grid-template-rows: minmax(9px,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="c2"></span> 61 <span class="c3"></span> 62 </div> 63 64 <div class="grid" style="grid-template-rows: minmax(18px,1fr) minmax(9px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> 65 <span class="c1"></span> 66 <span class="c2"></span> 67 <span class="c3"></span> 68 </div> 69 70 <div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(9px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(18px,1fr) ;"> 71 <span class="c1"></span> 72 <span class="c2"></span> 73 <span class="c3"></span> 74 </div> 75 76 <div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(18px,1fr) ;"> 77 <span class="c1"></span> 78 <span class="c2"></span> 79 <span class="c3"></span> 80 </div> 81 82 </body> 83 </html>