/* assets/css/grid.css * * Rigid N×M grid driven entirely by CONFIG['grid']. * No hard-coded row/column counts in this file. * * inline style supplies: * --grid-portrait-cols * --grid-portrait-rows * --grid-landscape-cols * --grid-landscape-rows * --grid-gap */ /* ------------------------------ 1. Orientation → effective grid vars ------------------------------ */ /* main.js is adding these classes: "dashboard-body is-portrait/is-landscape" */ body.dashboard-body.is-portrait { --grid-cols: var(--grid-portrait-cols); --grid-rows: var(--grid-portrait-rows); } body.dashboard-body.is-landscape { --grid-cols: var(--grid-landscape-cols); --grid-rows: var(--grid-landscape-rows); } /* Fallback – if JS hasn’t tagged orientation yet, just use portrait */ body.dashboard-body:not(.is-portrait):not(.is-landscape) { --grid-cols: var(--grid-portrait-cols); --grid-rows: var(--grid-portrait-rows); } /* ------------------------------ 2. Dashboard grid container ------------------------------ */ .dashboard-grid { display: grid; width: 100%; height: 100%; box-sizing: border-box; gap: var(--grid-gap); padding: var(--grid-gap); grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr)); align-content: stretch; justify-content: stretch; } /* ------------------------------ 3. Widgets inside the grid ------------------------------ */ .dashboard-grid > .widget { width: 100%; height: 100%; max-width: 100%; max-height: 100%; align-self: stretch; justify-self: stretch; /* Content can scroll/clamp inside, but the card never grows outside its 1×1 / 3×2 / whatever cell. */ overflow: hidden; }