1

I am new to using CSS grid and have stumbled across a problem that I can't find an answer online. What I am trying to achieve is a 7 column layout, and the remaining items to stretch in width equally to fill up the remaining space.

I have attempted to use auto-fill & auto-fit as I found online, but this didn't tackle my problem. I am not sure if this can be achieved in CSS grid and I may have to use flexbox?

I would like "Eight", "Nine" and "Ten" to stretch full width to be inline with the row above.

.wrapper {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: auto;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper>div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
mark
  • 235
  • 3
  • 11

2 Answers2

1

Can't be done automatically with grid for these reasons:

It's the opposite of this common problem:

May be possible with flex.

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper > div {
  flex: 1 0 14%;
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

* {
  box-sizing: border-box;
}
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
1

If you want 8, 9 and 10 to stretch full width underneath, then you could use grid-column and make those 3 the full width of the grid (fill the space).

add a .stretch class to divs 8, 9, and 10.

and then it's just this:

.stretch { grid-column: 1 / -1 }

easy peasy!

I may be misunderstanding the layout requirements based on the question and fiddle, but that might get you what you want...

theMightyT
  • 112
  • 6