CODEWITHSUNDEEP
css
Nivyan
Nivyan

Reputation: 139

CSS Grid with vertical and horizontal overflow

I'm trying to use display: grid to make a layout with a variable amount of columns, with horizontal and vertical overflow and the first column being a specific width.

Each of the columns, besides the first, should be the same width. For example,

grid-template-columns: 49px repeat(auto-fill, 300px);

makes the first column the correct width, and columns after 300px - until reaching the overflowing columns, which ignore the 300px.

The vertical scroll is achieved with overflow-y and a specified height.

overflow-y: scroll;
height: 70vh;

And the horizontal css so far is:

grid-template-columns: 49px repeat(auto-fit, 300px);
grid-auto-flow: column;
overflow-x: scroll;
width: 100%;

Stack snippet:

.grid-container {
  display: grid;
  grid-template-columns: 49px repeat(auto-fit, 300px);
  grid-auto-flow: column;
  overflow-x: scroll;
  width: 100%;
  overflow-y: scroll;
  height: 70vh;
}
<div class="grid-container">
  <div class="first-item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

Paint attempt to visualise the goal: Grid Paint Example

Upvotes: 1

Views: 1550

Answers (2)

Temani Afif
Temani Afif

Reputation: 272957

Use grid-auto-columns and you don't need to specify any CSS on the child items

.grid-container {
  display: grid;
  grid-template-columns: 49px; /* 1st column */
  grid-auto-columns: 300px; /* all the others */
  grid-auto-flow: column;
  overflow-x: scroll;
  height: 70vh;
}
<div class="grid-container">
  <div class="first-item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

Upvotes: 1

biberman
biberman

Reputation: 5767

You could solve this by omitting grid-template-columns and defining the width separately:

.grid-container {
  display: grid;
  grid-auto-flow: column;
  overflow-x: scroll;
  width: 100%;
  overflow-y: scroll;
  height: 70vh;
}

.first-item {
  width: 49px;
}

.item {
  width: 300px;
}
<div class="grid-container">
  <div class="first-item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

Upvotes: 1

Related Questions