Css grid repeat syntax - css

Question

I have to render a row using the css grid such that, the first column has to have a flexible length whereas all the rest of the columns have to have a fixed width. Something along the lines of the following
grid-template-columns: 1fr repeat(10, 100px)
The above does not work. How can this be done?

Answer 1

<div class="container">
<div>1fr</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr repeat(10, 100px);
grid-column-gap: 20px;
}
.container > div {
background-color: brown;
color: white;
text-align: center
}

Answer 2

Use grid-template-columns: max-content repeat(4, 100px);
.grid {
display: grid;
grid-template-columns: max-content repeat(4, 100px);
}
.item {
border: 1px solid red;
}
<div class="grid">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
</div>
<div class="grid">
<div class="item">Lorem ipsum dolor sit, amet...more</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
</div>

Answer 3

You can use auto-fit. It will fit the column into currently available space.
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));