button-display-grid-fullsize-1-ref.html (1132B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0 5 --> 6 <html> 7 <head> 8 <title>Reference: Testing for full height grid container in a button.</title> 9 <meta charset="utf-8"> 10 <style> 11 button { 12 vertical-align: top; 13 padding: 0; 14 border: solid 1px black; 15 background: lightblue; 16 width: 200px; 17 height: 200px; 18 } 19 20 .grid { 21 display: grid; 22 grid-template-columns: auto auto auto; 23 grid-template-rows: auto; 24 justify-content: space-between; 25 align-items: stretch; 26 width: 100%; 27 height: 100%; 28 } 29 30 .grid > * { 31 margin: 1px; 32 background: teal; 33 min-height: 10px; 34 min-width: 10px; 35 } 36 37 .vertical { 38 grid-template-columns: 1fr; 39 grid-template-rows: 1fr 1fr 1fr; 40 } 41 </style> 42 </head> 43 <body> 44 <button> 45 <div class="grid"> 46 <div></div> 47 <div></div> 48 <div></div> 49 </div> 50 </button> 51 <button> 52 <div class="grid vertical"> 53 <div></div> 54 <div></div> 55 <div></div> 56 </div> 57 </button> 58 </body> 59 </html>