Css синтаксис повторения сетки

Question

Я должен визуализировать строку с использованием сетки css так, чтобы первый столбец имел гибкую длину, тогда как все остальные столбцы должны иметь фиксированную ширину. Что-то вроде следующего:

grid-template-columns: 1fr repeat(10, 100px)

Выше не работает. Как это можно сделать?

Answer 1

Использование 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 2

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

Вы можете использовать auto-fit. Это поместит колонку в доступное в настоящее время пространство.

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));