Блог

Мне нужно автоматически заполнять столбцы любым числом от 2 до 4. Мне нужна общая ширина столбцов, чтобы заполнить ширину сетки для 2, 3 или 4 возможных столбцов.

Но когда я пробую код, который я вижу на страницах решений SO и учебников, например, на странице трюков CSS, они описывают автоматическое заполнение примерно так:

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

Но когда я делаю это в Хроме, там написано invalid property value .

HTML-это что-то вроде:

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

Как сделать так, чтобы любое количество столбцов автоматически заполнялось и заполняло ширину моей сетки в Chrome?

Ты был почти там. Вместо auto-fill того, что тебе нужно auto-fit .

Однако обратите внимание, что это НЕ ограничит количество столбцов только 4. Он создаст столько столбцов, сколько необходимо, чтобы они соответствовали разрешенной ширине.

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

Я обычно использую это:

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

Chrome поддерживает столбцы шаблона сетки, поэтому у вас, вероятно, есть синтаксическая ошибка. Опубликуйте свой код, и я, вероятно, смогу помочь больше.