CODEWITHSUNDEEP
htmlcsscss-grid
BBaysinger
BBaysinger

Reputation: 6987

Make any number of columns automatically populate and `auto-fill` the width of grid in Chrome

I need to auto-fill columns, any number from 2 to 4. I need the total column widths to fill the width of the grid for the 2, 3, or 4 possible columns.

But when I try code I see in SO solutions and tutorial pages like from a CSS Tricks page, they describe auto-filling something like this:

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

But when I do it in Chrome, it says invalid property value.

HTML is something like:

<div class="my-grid">
    <div class="some-column"></div>
    <div class="some-column"></div>
    <div class="some-column"></div>
</div>

How do I make any number of columns automatically populate and fill the width of my grid in Chrome?

Upvotes: 1

Views: 110

Answers (2)

Paulie_D
Paulie_D

Reputation: 114991

You were almost there. Instead of auto-fill you need auto-fit.

Note however that this will NOT restrict the number of columns to just 4. It will create as many columns it needs to fit into the allowed width.

.my-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  margin-bottom: 1em;
  ;
}

.some-column {
  height: 50px;
  border: 1px solid red;
}
<div class="my-grid">
  <div class="some-column"></div>
  <div class="some-column"></div>
  <div class="some-column"></div>
</div>

<div class="my-grid">
  <div class="some-column"></div>
  <div class="some-column"></div>
</div>

<div class="my-grid">
  <div class="some-column"></div>
  <div class="some-column"></div>
  <div class="some-column"></div>
  <div class="some-column"></div>
</div>

Upvotes: 3

Cyberdelic Soup
Cyberdelic Soup

Reputation: 60

I typically use this:

display: grid;
grid-template-columns: auto auto auto auto;

Chrome does support grid-template-columns, so you probably have a syntax error. Post your code and I could probably help more.

Upvotes: -2

Related Questions