grid-auto-min-sizing-definite-001.html (2198B)
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: 'auto' min-sizing with definite min-width/height</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> 11 <link rel="match" href="grid-auto-min-sizing-definite-001-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } 14 br { clear:both; } 15 16 .grid { 17 display: grid; 18 border: 1px dashed silver; 19 grid-template-columns: minmax(auto,0); 20 grid-template-rows: minmax(auto,0) minmax(auto,0); 21 float: left; 22 margin-bottom:20px; 23 align-items: start; 24 justify-items: start; 25 } 26 .v { 27 writing-mode: vertical-lr; 28 -webkit-writing-mode: vertical-lr; 29 } 30 .h { 31 writing-mode: horizontal-tb; 32 -webkit-writing-mode: horizontal-tb; 33 } 34 .bb { 35 box-sizing: border-box; 36 } 37 38 span { 39 display: block; 40 background: lime; 41 margin: 7px 13px 50% 20%; 42 padding:1px 3px 10% 30%; 43 } 44 45 span.v { 46 min-height: 30px; 47 min-width: 10px; 48 border-left: 1px solid; 49 border-top: 3px solid; 50 } 51 52 span.h { 53 min-width: 30px; 54 min-height: 10px; 55 border-left: 3px solid; 56 border-top: 1px solid; 57 } 58 59 b40 { 60 display: block; 61 width: 40px; 62 height: 40px; 63 border: 1px solid pink; 64 } 65 66 xx { 67 display: block; 68 background: lime; 69 padding:32px 32px 20% 40%; 70 margin: 0 0 40% 20%; 71 } 72 73 </style> 74 </head> 75 <body> 76 77 <div class="grid"><span class="h"><x></x></span></div> 78 <div class="grid"><span class="h bb"><x></x></span></div> 79 <div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div> 80 <div class="grid"><span class="h"><b40></b40></span></div> 81 <br> 82 <div class="grid"><span class="v"><x></x></span></div> 83 <div class="grid"><span class="v bb"><x></x></span></div> 84 <div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div> 85 <div class="grid"><span class="v"><b40></b40></span></div> 86 87 <div class="grid"><xx class="v"></xx></div> 88 <div class="grid v"><xx class="h"></xx></div> 89 90 </body> 91 </html>