Create a deliberately overflowing css grid

Question

I'm trying to create a horizontally scrolling widget. Much like an image carousel but with text and icons instead.

It will have multiple columns, but only one will be visible at any one time. The rest will have overflow: hidden.

In order to make the columns equal size, I'm looking at css-grid. For example, this makes 3 equal width columns:

display: grid;
grid-auto-columns: 1fr;
grid-auto-flow:column;

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.

The result being on a 3 column layout, that 2 columns overflowed and they could be hidden.

Not sure whether this is possible without setting a "px" width on the grid itself.

score 0 · Answer 1 · answered Mar 10 '21 at 19:40

Simply use 100%

.container {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  height:100px;
  overflow:auto;
}

.container > div {
  background:red;
  box-shadow:0 0 0 2px inset #000;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Related in case you want to deal with more columns and gaps: Responsive horizontal scrolling CSS Grid with fixed number of grid-items per breakpoint

Create a deliberately overflowing css grid

1 Answers1