Использование значения автозаполнения в функции repeat() не работает в Firefox?

Я пытаюсь изучить макет css-grid. Я включил флаги сетки для Chrome, FireFox и FireFox Developer. Я также загружал FireFox каждую ночь (на сегодняшний день 52.0a1 (2016-11-07) (64-разрядная версия)). Я на Mac.

Мой план состоял в том, что я хотел использовать функцию auto-fill, чтобы обеспечить четное количество столбцов. Итак, я сделал это:

.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, 2.5vw 2.5vw);
}

В Хроме это работало, но во всех ФФ вижу ошибку invalid property value в отладчике.

Я смотрю на этот пример сетки от Рэйчел Эндрю, а в третьем примере она показывает использование фиксированного числа повторяющегося шаблона:

.wrapper {
  display: grid;
  grid-template-columns: repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
  grid-template-rows: auto repeat(4, [row] auto [gutter] 15px);
}

Я попытался изменить количество повторов на число, и это работает во всех моих браузерах. Но auto-fill работает только в Chrome. Я знаю, что стандарт еще не выпущен, но так ли это должно быть?

Есть ли какой-нибудь другой способ обеспечить четное количество столбцов, которые поместятся в пространстве?


css css-grid
person Rothrock    schedule 08.11.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Значение auto-fill работает как в Chrome, так и в Firefox.

Проблема, похоже, в вашем коде:

grid-template-columns: repeat(auto-fill, 2.5vw 2.5vw);

Этот код не соответствует требуемому синтаксису для функции repeat() с auto-fill:

7.2.2.1. Синтаксис repeat()

Точный синтаксис нотации repeat() имеет несколько форм:

<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<auto-repeat>  = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

В соответствии с определением синтаксиса для <auto-repeat> в аргументе может быть только одно значение фиксированного размера. У вас есть два.

Так что проблема была не в первом аргументе (auto-fill). Это было второе.

Как только вы удалите дубликат 2.5vw, Firefox примет правило как действительное. (По-видимому, Chrome с самого начала игнорировал дубликат.)

grid-container {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, 2.5vw 2.5vw); */ /* INVALID */
  /* grid-template-columns: repeat(auto-fill, 2.5vw); */       /* VALID */
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr)); /* VALID */
  grid-gap: 5px;
}

grid-item {
  border: 1px solid lightgray;
  background-color: lightgreen;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
  <grid-item>4</grid-item>
  <grid-item>5</grid-item>
  <grid-item>6</grid-item>
  <grid-item>7</grid-item>
</grid-container>

jsFiddle

person Michael Benjamin    schedule 16.04.2017
comment
Это выглядит великолепно. Прошло немного времени с тех пор, как я изучал это. Моя первоначальная цель состояла в том, чтобы обеспечить четное количество столбцов. Вы видите способ сделать это? - person Rothrock; 17.04.2017
comment
Это хороший вопрос. Я не думаю, что auto-fill или auto-fit являются правильным решением для этого. Возможно, вам потребуется определить количество столбцов сетки в строке, а затем использовать медиа-запросы, чтобы установить четное число среди размеров экрана. - person Michael Benjamin; 17.04.2017
comment
В то же время я впервые читаю спецификацию Grid Layout, поэтому может быть более эффективное решение, которое я еще не нашел. - person Michael Benjamin; 17.04.2017