<!DOCTYPE html> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0 --> <html> <head> <title>Reference: Testing for full height grid container in a button.</title> <meta charset="utf-8"> <style> button { vertical-align: top; padding: 0; border: solid 1px black; background: lightblue; width: 200px; height: 200px; } .grid { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto; justify-content: space-between; align-items: stretch; width: 100%; height: 100%; } .grid > * { margin: 1px; background: teal; min-height: 10px; min-width: 10px; } .vertical { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; } </style> </head> <body> <button> <div class="grid"> <div></div> <div></div> <div></div> </div> </button> <button> <div class="grid vertical"> <div></div> <div></div> <div></div> </div> </button> </body> </html>