grid-max-sizing-flex-008.html (2428B)
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 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks"> 11 <link rel="match" href="grid-max-sizing-flex-008-ref.html"> 12 <style type="text/css"> 13 .grid { 14 display: grid; 15 border:1px dashed; 16 margin: 3px; 17 } 18 .rows { 19 float: left; 20 grid: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; 21 grid-row-gap: 33px; 22 } 23 .cols { 24 display: inline-grid; 25 grid: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); 26 grid-column-gap: 33px; 27 } 28 29 .item:nth-child(1) { background-color: purple; } 30 .item:nth-child(2) { background-color: blue; } 31 32 </style> 33 34 </head><body> 35 36 <pre>First four are without min/max-sizes:</pre> 37 <div class="grid rows"> 38 <div class="item"></div> 39 <div class="item"></div> 40 </div> 41 <div style="height:0"> 42 <div class="grid rows"> 43 <div class="item"></div> 44 <div class="item"></div> 45 </div> 46 </div> 47 <div class="grid cols"> 48 <div class="item"></div> 49 <div class="item"></div> 50 </div> 51 <div style="display:inline-block; width:0"> 52 <div class="grid cols"> 53 <div class="item"></div> 54 <div class="item"></div> 55 </div> 56 </div> 57 58 <br clear="all"> 59 60 <pre>Max-size less than grid-gap:</pre> 61 <div class="grid rows" style="height:0px"> 62 <div class="item"></div> 63 <div class="item"></div> 64 </div> 65 <div class="grid rows" style="max-height:0px"> 66 <div class="item"></div> 67 <div class="item"></div> 68 </div> 69 <div class="grid rows" style="height:20px"> 70 <div class="item"></div> 71 <div class="item"></div> 72 </div> 73 <div class="grid rows" style="max-height:20px"> 74 <div class="item"></div> 75 <div class="item"></div> 76 </div> 77 <div class="grid rows" style="height:33px"> 78 <div class="item"></div> 79 <div class="item"></div> 80 </div> 81 82 <br clear="all" style="margin-top:40px; "> 83 84 <div class="grid cols" style="max-width:20px; margin-right:30px;"> 85 <div class="item"></div> 86 <div class="item"></div> 87 </div> 88 <div class="grid cols" style="width:20px; margin-right:30px;"> 89 <div class="item"></div> 90 <div class="item"></div> 91 </div> 92 <div class="grid cols" style="width:33px; margin-right:30px;"> 93 <div class="item"></div> 94 <div class="item"></div> 95 </div> 96 97 </body></html>