Search code examples
csscss-grid

Css grid repeat syntax

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?

Solution

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