grid-item-auto-min-size-clamp-007-ref.html (5609B)
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>Reference: Clamp 'automatic minimum size' to definite max-sizing for items with specified intrinsic 'width'/'height'</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 12 13 .grid { 14 display: grid; 15 float: left; 16 position: relative; 17 grid-template-columns: repeat(2,20px); 18 grid-template-rows: repeat(2,20px); 19 align-items: start; 20 justify-items: start; 21 border: 1px dashed; 22 margin-right: 16px; 23 margin-bottom: 14px; 24 } 25 .c-auto { grid-template-columns: 15px; width: 15px; } 26 .c-30 { grid-template-columns: 30px; width: 30px; } 27 .r-auto { grid-template-rows: 15px; height: 15px; } 28 .r-min { grid-template-rows: 40px; height: 40px; } 29 .r-max { grid-template-rows: 40px; height: 40px; } 30 span { 31 grid-area: 1 / 1; 32 font-size: 48px; 33 background: grey; 34 } 35 y { 36 position: absolute; 37 grid-area: 2 / 1 / 3 / 2; 38 top:0;left:0;right:0; 39 height: 10px; 40 background: lightgrey; 41 } 42 .r y { 43 grid-area: 1 / 2 / 2 / 3; 44 top:0;bottom:0;left:0; 45 width: 10px; 46 height: auto; 47 } 48 br { clear: both; } 49 50 x { display:block; width:30px; height:40px; } 51 span { width:15px; } 52 .r span { width:20px; } 53 .grid.c-30 span, .r.grid.c-30 span { width:30px; } 54 .grid.r-auto span { height:40px; } 55 .r span { height:15px; } 56 .r.r-min span, .r.r-max span { height:40px; } 57 </style> 58 </head> 59 <body> 60 61 <div class="grid c-auto"><y></y><span style="width:30px"><x>X</x></span></div> 62 <div class="grid c-30"><y></y><span><x>X</x></span></div> 63 <div class="grid c-30"><y></y><span><x>X</x></span></div> 64 <div class="grid c-30"><y></y><span><x>X</x></span></div> 65 <div class="grid c-30"><y></y><span><x>X</x></span></div> 66 67 <br> 68 69 <div class="grid c-30"><y></y><span><x>X</x></span></div> 70 <div class="grid c-30"><y></y><span><x>X</x></span></div> 71 <div class="grid c-30"><y></y><span><x>X</x></span></div> 72 <div class="grid c-30"><y></y><span><x>X</x></span></div> 73 <div class="grid c-30"><y></y><span><x>X</x></span></div> 74 75 <br> 76 77 <div class="grid c-30"><y></y><span><x>X</x></span></div> 78 <div class="grid c-30"><y></y><span><x>X</x></span></div> 79 <div class="grid c-30"><y></y><span><x>X</x></span></div> 80 <div class="grid c-30"><y></y><span><x>X</x></span></div> 81 <div class="grid c-30"><y></y><span><x>X</x></span></div> 82 83 <br> 84 85 <div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div> 86 <div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div> 87 <div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div> 88 <div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div> 89 <div class="grid r r-auto"><y></y><span style="width:20px"><x>X</x></span></div> 90 91 <br> 92 93 <div class="grid r r-min"><y></y><span><x>X</x></span></div> 94 <div class="grid r r-min"><y></y><span><x>X</x></span></div> 95 <div class="grid r r-min"><y></y><span><x>X</x></span></div> 96 <div class="grid r r-min"><y></y><span><x>X</x></span></div> 97 <div class="grid r r-min"><y></y><span><x>X</x></span></div> 98 99 <br> 100 101 <div class="grid r r-max"><y></y><span><x>X</x></span></div> 102 <div class="grid r r-max"><y></y><span><x>X</x></span></div> 103 <div class="grid r r-max"><y></y><span><x>X</x></span></div> 104 <div class="grid r r-max"><y></y><span><x>X</x></span></div> 105 <div class="grid r r-max"><y></y><span><x>X</x></span></div> 106 107 <br> 108 109 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> 110 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> 111 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> 112 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> 113 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> 114 115 <br> 116 117 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> 118 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> 119 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> 120 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> 121 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> 122 123 <br> 124 125 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> 126 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> 127 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> 128 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> 129 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> 130 131 <br> 132 133 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> 134 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> 135 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> 136 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> 137 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> 138 139 <br> 140 141 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> 142 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> 143 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> 144 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> 145 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> 146 147 <br> 148 149 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> 150 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> 151 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> 152 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> 153 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> 154 155 </body></html>