I have a grid that scrolls vertically, with columns adjusting their width automatically.
.grid {
display: grid;
overflow-y: auto;
grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr));
}
Now, I'm attempting to create a horizontally scrolling grid where rows adjust their height automatically (essentially a rotated version of the above) - but it's proving more challenging than expected.
I've experimented with this code (and tried various variations):
.grid {
display: grid;
overflow-x: auto;
overflow-y: hidden;
grid-template-rows: repeat(auto-fit, minmax($min-row-height, 1fr));
grid-auto-flow: row;
}
Is achieving this layout possible at all?