A first element should take a free space and next elements should have fixed size

Question

I want to set for fist element '1fr' and any other elements should have fixed size

I'm tried this and it works.

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

This, what I'm trying to do.

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

A first element should have a 1fr (any available space)

enter image description here

Answer 1

I think flexbox would be more appropriate here.

.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>