Первый элемент должен занимать свободное место, а следующие элементы должны иметь фиксированный размер

Question

Я хочу установить для первого элемента '1fr', и любые другие элементы должны иметь фиксированный размер

Я попробовал это, и это работает.

grid-template-columns: 500px repeat(auto-fill, 50px);

Это, то, что я 'm пытается сделать.

.container {
    display: grid;
    grid-template-columns: 1fr repeat(auto-fill, 50px);
    > div {
      border: 1px solid red;
    }
  }

Первый элемент должен иметь 1fr (любое доступное пространство)

введите описание изображения здесь

Answer 1

Я думаю, что flexbox будет более уместным здесь.

.container {
  display: flex;
  height: 98vh;
  margin: 1vh 1vw;
}

.item {
  border: 1px solid red;
  flex: 0 0 50px;
  margin: .5em;
}

.wide {
  flex: 1
}

<div class="container">
  <div class="item wide">Auto Remaining Width</div>
  <div class="item">50px</div>
  <div class="item">50px</div>
  <div class="item">50px</div>
</div>