grid-item-button-001-ref.html (5968B)
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: stretching/clamping button item</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1314206"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 12 * { font:16px/1 monospace; } 13 14 .grid2 { 15 display: grid; 16 float: left; 17 grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto; 18 grid-gap: 5px; 19 margin-bottom:20px; 20 margin-right:20px; 21 border:1px solid; 22 } 23 .grid { 24 display: block; 25 float: left; 26 margin-bottom:20px; 27 margin-right:20px; 28 border:1px solid; 29 line-height: 0; 30 } 31 button { 32 border: 1px solid; 33 padding: 0; 34 margin: 0; 35 vertical-align: top; 36 box-sizing: border-box; 37 min-width: 0; 38 } 39 button:nth-child(1n) { background: blue; } 40 button:nth-child(2n) { background: grey; } 41 button:nth-child(3n) { background: tan; } 42 button:nth-child(4n) { background: silver; } 43 .sz > button { 44 width:20px; height:10px; 45 } 46 .mw > button { 47 min-width:15px; 48 } 49 .mw40 > button { 50 min-width:40px; 51 } 52 .sz.t2 > button { 53 width:10px; height:20px; 54 } 55 a30 { 56 display: inline-block; 57 height: 0; 58 width: 30px; 59 direction: rtl; 60 } 61 a10 { 62 display: inline-block; 63 height: 0; 64 width: 10px; 65 direction: rtl; 66 } 67 .rel > button { 68 position:absolute; 69 } 70 </style> 71 </head> 72 <body> 73 74 <div class="grid sz"> 75 <button> </button><button style="margin-left:-5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:15px"> </button><button style="margin-left:5px"> </button><button style="margin-left:-5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:15px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button></div> 76 77 <div class="grid sz t2"> 78 <button> </button><button style="margin-left:5px"> </button><button style="margin-left:25px"> </button><button style="margin-left:25px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:25px"> </button><button style="margin-left:25px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button></div> 79 80 <div class="grid2" style="width:215px"> 81 <button style="width:10px"> </button><button style="width:30px"> </button><a10><button style="background:tan"> </button></a10><a30><button style="background:silver"> </button></a30><button style="width:10px"> </button><button style="width:30px"> </button><a10><button> </button></a10><a30><button style="background:silver;"> </button></a30></div> 82 83 <div class="grid"> 84 <button> </button><button> </button><br><button style="background:tan"> </button><button style="background:silver"> </button></div> 85 86 <div class="grid rel" style="width:100px; height:100px; position:relative"> 87 <button style="top:0;width:50px;height:50px"> </button><button style="top:0;right:0;height:50px"> </button><button style="bottom:0;width:50px;"> </button><button style="bottom:0;right:0"> </button></div> 88 89 <div class="grid rel" style="height:40px; position:relative"> 90 <button style="left:0;top:0;height:20px"> </button><button style="top:0;right:0;height:20px"> </button><button style="left:0;bottom:0;"> </button><button style="bottom:0;right:0"> </button><button style="position:static;visibility:hidden"> </button><button style="position:static;visibility:hidden"> </button> 91 </div> 92 93 <div class="grid sz t2 mw"> 94 <button> </button><button> </button><button style="margin-left:15px"> </button><button style="margin-left:20px"> </button><button style="margin-left:5px"> </button><button> </button><button style="margin-left:15px"> </button><button style="margin-left:20px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button></div> 95 96 <div class="grid mw40" style="width:215px"> 97 <button> </button><button style="margin-left:-25px"> </button><button style="margin-left:-35px"> </button><button style="margin-left:-5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:-25px"> </button><button style="margin-left:-35px"> </button><button style="margin-left:-5px"> </button></div> 98 99 <div class="grid rel" style="width:100px; height:100px; position:relative"> 100 <button style="top:0;width:40px;height:40px"> </button><button style="top:0;right:0;height:40px"> </button><button style="bottom:0;width:40px;"> </button><button style="bottom:0;right:0"> </button></div> 101 102 <div class="grid rel" style="width:100px; height:100px; position:relative"> 103 <button style="top:0;width:40px;height:40px"> </button><button style="top:0;right:0;height:40px"> </button><button style="bottom:0;width:40px;"> </button><button style="bottom:0;right:0"> </button></div> 104 105 </body> 106 </html>