grid-max-sizing-flex-008-ref.html (2681B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <!DOCTYPE html> 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=1309407"> 10 <style type="text/css"> 11 .grid { 12 display: grid; 13 border:1px dashed; 14 margin: 3px; 15 } 16 .rows { 17 float: left; 18 grid: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; 19 grid-row-gap: 33px; 20 } 21 .rows-min { 22 float: left; 23 grid: 10px 10px / 50px; 24 grid-row-gap: 33px; 25 } 26 .cols { 27 display: inline-grid; 28 grid: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); 29 grid-column-gap: 33px; 30 } 31 .cols-min { 32 display: inline-grid; 33 grid: 50px / 10px 10px; 34 grid-column-gap: 33px; 35 } 36 37 .item:nth-child(1) { background-color: purple; } 38 .item:nth-child(2) { background-color: blue; } 39 40 .w70 { width: 70px; } 41 .w90 { width: 90px; } 42 .h70 { height: 70px; } 43 .h90 { height: 90px; } 44 </style> 45 46 </head><body> 47 48 <pre>First four are without min/max-sizes:</pre> 49 <div style="float:left"> 50 <div class="grid rows"> 51 <div class="item"></div> 52 <div class="item"></div> 53 </div> 54 </div> 55 <div style="height:100px; margin-bottom:-100px"> 56 <div class="grid rows"> 57 <div class="item"></div> 58 <div class="item"></div> 59 </div> 60 </div> 61 <div style="display:inline-block; width:73px; margin-right:-2px"> 62 <div class="grid cols"> 63 <div class="item"></div> 64 <div class="item"></div> 65 </div> 66 </div> 67 <div class="grid cols-min" style="width:53px"> 68 <div class="item"></div> 69 <div class="item"></div> 70 </div> 71 72 <br clear="all"> 73 74 <pre>Max-size less than grid-gap:</pre> 75 <div class="grid rows-min" style="height:0px"> 76 <div class="item"></div> 77 <div class="item"></div> 78 </div> 79 <div class="grid rows-min" style="max-height:0px"> 80 <div class="item"></div> 81 <div class="item"></div> 82 </div> 83 <div class="grid rows-min" style="height:20px"> 84 <div class="item"></div> 85 <div class="item"></div> 86 </div> 87 <div class="grid rows-min" style="max-height:20px"> 88 <div class="item"></div> 89 <div class="item"></div> 90 </div> 91 <div class="grid rows-min" style="height:33px"> 92 <div class="item"></div> 93 <div class="item"></div> 94 </div> 95 96 <br clear="all" style="margin-top:40px; "> 97 98 <div class="grid cols-min" style="width:20px; margin-right:30px;"> 99 <div class="item"></div> 100 <div class="item"></div> 101 </div> 102 <div class="grid cols-min" style="width:20px; margin-right:30px;"> 103 <div class="item"></div> 104 <div class="item"></div> 105 </div> 106 <div class="grid cols-min" style="width:33px; margin-right:30px;"> 107 <div class="item"></div> 108 <div class="item"></div> 109 </div> 110 111 </body></html>