title: Create a deliberately overflowing css grid
body: <p>I'm trying to create a horizontally scrolling widget. Much like an image carousel but with text and icons instead.</p>
  <p>It will have multiple columns, but only one will be visible at any one time. The rest will have <code>overflow: hidden</code>.</p>
  <p>In order to make the columns equal size, I'm looking at css-grid. For example, this makes 3 equal width columns:</p>
  <pre><code>display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow:column;
  </code></pre>
  <p>However, I wondered if there was a way to constrain the grid itself, to one column wide. so the grid would be one column wide and each column would of course be one column wide.</p>
  <p>The result being on a 3 column layout, that 2 columns overflowed and they could be hidden.</p>
  <p>Not sure whether this is possible without setting a &quot;px&quot; width on the grid itself.</p>