I am attempting to design a horizontal scrolling widget that resembles an image carousel but with text and icons.
This widget will contain multiple columns, but only one will be visible at a time while the others will have 'overflow: hidden'.
To ensure equal sized columns, I am exploring CSS-grid. For instance, using the following code to create three equally width columns:
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
Yet, I am curious if there is a way to limit the grid itself to just one column wide so that each individual column retains one column width.
The desired outcome would show in a layout of three columns, where two columns overflowed and could then be concealed.
Uncertain if achieving this is possible without assigning a set 'px' width to the grid directly.