:root { box-sizing: border-box; margin: 0; padding: 0; font-size: 100%; font: inherit; vertical-align: baseline; } h1, h2, h3 { padding: 0; margin: 0; margin-bottom: 0.4em; margin-top: 0.4em; } div.main_container { height: 95vh; width: 98vw; display: grid; grid-template-columns: [left] 1fr [right] 1fr; grid-template-rows: [upper] 2fr [lower] 1fr; column-gap: 1vw; row-gap: 1vh; } div.tree { grid-column: left / left; grid-row: upper / upper; width: 100%; height: 100%; border: 2px solid green; } div.transfer_menu { grid-column: left / left; grid-row: lower / lower; width: 100%; height: 100%; border: 2px solid orange; } div.transfer_menu input:invalid { background-color: #faa; } div.plate_container { border: 2px dashed purple; grid-column: right / right; grid-row: upper / 3; } .dialog { padding: 1em; } .dialog::backdrop { background: rgba(0,125,255,0.3); }