button-display-grid-fullsize-1.html (1135B)
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>CSS Test: 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: inline-grid; 22 grid-template-columns: auto auto auto; 23 grid-template-rows: auto; 24 justify-content: space-between; 25 align-items: stretch; 26 } 27 28 .grid > * { 29 margin: 1px; 30 background: teal; 31 min-height: 10px; 32 min-width: 10px; 33 } 34 35 .vertical { 36 grid-template-columns: 1fr; 37 grid-template-rows: 1fr 1fr 1fr; 38 } 39 </style> 40 </head> 41 <body> 42 <!-- 3 columns/1 row --> 43 <button class="grid"> 44 <div></div> 45 <div></div> 46 <div></div> 47 </button> 48 <!-- 1 column/3 rows, using "fr" units to fill container --> 49 <button class="grid vertical"> 50 <div></div> 51 <div></div> 52 <div></div> 53 </button> 54 </body> 55 </html>