Using CSS grid how do i make a one column layout where one element fills remaining space after all others have taken an auto width

Question

I don't want to explicitly define the number of columns so i can add other auto width children to it later.
I don't want to use extra wrappers.
I want to do it in CSS grid not flexbox (I can do it in flexbox with wrappers and all)
In case you are wondering its a layout for a navigation bar

Heres what i am trying to achieve

.container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 5px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.item--1,
.item--3 {
  grid-column: 1fr;
  width: 100px;
}

.item--2 {
  color: #fff;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
}

.item {
  height: 100px;
  background: deepskyblue;
}

@media screen and (max-width: 768px) {
  .container-1 {
    grid-template-rows: auto auto;
  }
  .item--1 {
    grid-column: 1 / 2;
  }
  .item--2 {
    grid-row-start: 2;
    grid-column: 1 / -1;
  }
  .item--3 {
    grid-column: 3 / 4;
  }
}

<div class="container">
  <div class="item item--1"></div>
  <div class="item item--2">Fill up remaining space</div>
  <div class="item item--3"></div>
</div>

this isn't better than your old question where you at least had code (https://stackoverflow.com/q/62044990/8620333) .. here this is no question but only a list of requirements — Temani Afif, May 27 '20 at 15:39
I still don't understand why you don't want flexbox for this? you can do it with flexbox and without extra wrapper — Temani Afif, May 27 '20 at 15:43
@TemaniAfif could you help me out with that, like with some code also grid because that question is just stuck in my head — , May 27 '20 at 15:44
you won't find any clean code using CSS grid if the number of elements isn't known and the element that need to fill the space isn't known too. Flexbox is more suitable here — Temani Afif, May 27 '20 at 15:51
@TemaniAfif Thanks for the answer, Hope you understand what i am trying to learn here with grid, In case you find it please post it — , May 27 '20 at 15:57
learning is a thing and trying to do *impossible* stuff is another thing ... you can learn to drive a car but you cannot use your car to fly. You should learn to use the best tool for each case instead of trying to overcomplicate something. read this: https://stackoverflow.com/q/55064488/8620333 — Temani Afif, May 27 '20 at 16:00
@TemaniAfif to be able do that in grid seemed so amazing, it could have been so much cleaner and understandable — , May 27 '20 at 16:06

score 0 · Answer 1 · answered May 27 '20 at 15:48

Here is an idea with flexbox and without extra wrapper:

.container {
  display: flex;
  grid-gap: 5px;
  margin-bottom: 10px;
}

/* this is your gap */
.item:not(:last-child) {
  margin-right: 5px;
}
/**/

.fill {
  color: #fff;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  flex-grow: 1; /* fill the remaining space */
}

.item {
  height: 100px;
  width: 100px;
  background: deepskyblue;
  margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
  .container {
    flex-wrap: wrap; /* allow the wrap */
  }
  .fill {
    order: 2; /* make the element the last on*/
    flex-basis: 100%; /* 100% width */
    margin-right: 0!important;
  }
  .fill + * {
    margin-left: auto; /* keep the element on the left */
  }
}

<div class="container">
  <div class="item"></div>
  <div class="item fill">Fill up remaining space</div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Using CSS grid how do i make a one column layout where one element fills remaining space after all others have taken an auto width

1 Answers1