/* Reset default margins/padding */ html, body { margin: 0.0em; padding: 0.0em; } /* Global grid container: 16 columns, each 6.25% of the viewport width */ .grid-container { display: grid; grid-template-columns: repeat(16, 1fr); width: calc(100vw - 0.4em); margin: 0.2em; background: #f5e8c7; } /* Style for all grid items */ .grid-item { box-sizing: border-box; padding: 0.5em; border: 1px solid #ccc; text-align: center; } .grid-label { text-align: right; } /* Style for the message box */ .message-box { box-sizing: border-box; border: 1px solid #ccc; padding: 0.5em; background: #eef; height: 100%; width: 100%; text-align: left; } /* Ensure input elements fill their grid cell */ .grid-item input { width: 100%; box-sizing: border-box; }