grid-item-button-001.html (4857B)
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: stretching/clamping button item</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1314206"> 10 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch"> 11 <link rel="match" href="grid-item-button-001-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 14 * { font:16px/1 monospace; } 15 16 .grid { 17 display: grid; 18 float: left; 19 grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto; 20 grid-gap: 5px; 21 margin-bottom:20px; 22 margin-right:20px; 23 border:1px solid; 24 } 25 button { 26 border: 1px solid; 27 padding: 0; 28 margin: 0; 29 } 30 button:nth-child(1n) { background: blue; } 31 button:nth-child(2n) { background: grey; } 32 button:nth-child(3n) { background: tan; } 33 button:nth-child(4n) { background: silver; } 34 .sz > button { 35 width:20px; height:10px; 36 } 37 .mw > button { 38 min-width:15px; 39 } 40 .mw40 > button { 41 min-width:40px; 42 } 43 .max40 > button { 44 max-width:40px; 45 max-height:40px; 46 } 47 .sz.t2 > button { 48 width:10px; height:20px; 49 } 50 51 .jend { justify-self: end; } 52 .aend { align-self: end; } 53 .end { justify-self: end; align-self: end; } 54 </style> 55 </head> 56 <body> 57 58 <div class="grid sz"> 59 <button> </button> 60 <button> </button> 61 <button class="jend"> </button> 62 <button class="jend"> </button> 63 <button class="aend"> </button> 64 <button class="aend"> </button> 65 <button class="end"> </button> 66 <button class="end"> </button> 67 <button> </button> 68 <button class="jend"> </button> 69 <button class="aend"> </button> 70 <button class="end"> </button> 71 </div> 72 73 <div class="grid sz t2"> 74 <button> </button> 75 <button> </button> 76 <button class="jend"> </button> 77 <button class="jend"> </button> 78 <button class="aend"> </button> 79 <button class="aend"> </button> 80 <button class="end"> </button> 81 <button class="end"> </button> 82 <button> </button> 83 <button class="jend"> </button> 84 <button class="aend"> </button> 85 <button class="end"> </button> 86 </div> 87 88 <div class="grid"> 89 <button> </button> 90 <button> </button> 91 <button class="jend"> </button> 92 <button class="jend"> </button> 93 <button class="aend"> </button> 94 <button class="aend"> </button> 95 <button class="end"> </button> 96 <button class="end"> </button> 97 </div> 98 99 <div class="grid" style="grid: auto/auto auto; grid-gap: 0;"> 100 <button> </button> 101 <button class="jend"> </button> 102 <button class="aend"> </button> 103 <button class="end"> </button> 104 </div> 105 106 <div class="grid" style="grid: 50px 50px/50px 50px; grid-gap: 0;"> 107 <button> </button> 108 <button class="jend"> </button> 109 <button class="aend"> </button> 110 <button class="end"> </button> 111 </div> 112 113 <div class="grid" style="grid: minmax(auto,20px) 20px/auto auto; grid-gap: 0;"> 114 <button> </button> 115 <button class="jend"> </button> 116 <button class="aend"> </button> 117 <button class="end"> </button> 118 </div> 119 120 <div class="grid sz t2 mw"> 121 <button> </button> 122 <button> </button> 123 <button class="jend"> </button> 124 <button class="jend"> </button> 125 <button class="aend"> </button> 126 <button class="aend"> </button> 127 <button class="end"> </button> 128 <button class="end"> </button> 129 <button> </button> 130 <button class="jend"> </button> 131 <button class="aend"> </button> 132 <button class="end"> </button> 133 </div> 134 135 <div class="grid mw40"> 136 <button> </button> 137 <button> </button> 138 <button class="jend"> </button> 139 <button class="jend"> </button> 140 <button class="aend"> </button> 141 <button class="aend"> </button> 142 <button class="end"> </button> 143 <button class="end"> </button> 144 </div> 145 146 <div class="grid max40" style="grid:50px 50px/50px 50px; grid-gap: 0;"> 147 <button> </button> 148 <button class="jend"> </button> 149 <button class="aend"> </button> 150 <button class="end"> </button> 151 </div> 152 153 <div class="grid max40" style="grid:50px 50px/50px 50px; place-items:stretch; grid-gap: 0;"> 154 <button> </button> 155 <button class="jend"> </button> 156 <button class="aend"> </button> 157 <button class="end"> </button> 158 </div> 159 160 </body> 161 </html>