Css grid repeat syntax

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?

Why not use flex for this ? it's far too simple using flex, `flex:1` on the first item and a fixed width on the rest — Rainbow, Jan 14 '20 at 11:13
related (probably a duplicate) https://stackoverflow.com/a/58476744/8620333 — Temani Afif, Jan 14 '20 at 14:23

score 2 · Answer 1 · answered Jan 14 '20 at 14:01

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

score 1 · Accepted Answer · answered Jan 14 '20 at 11:33

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>

score 0 · Answer 3 · answered Jan 14 '20 at 11:16

0

You can use auto-fit. It will fit the column into currently available space.

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

answered Jan 14 '20 at 11:16

Ijaz Ali

128
9

Css grid repeat syntax

3 Answers3