Смешивание фиксированной длины и повторения () в CSS Grid

Question

Я пытаюсь сделать календарь, используя сетку. Каждый день недели будет иметь заголовок. Моя цель - установить высоту заголовка (то есть: первую строку в сетке) равной 30 пикселям, а остальные строки разделить оставшуюся часть доступного пространства.

Мой календарь CSS выглядит так:

.calendar{
    display:grid;
    grid-template-columns:repeat(1,1fr);
    grid-template-rows:30px repeat(auto-fill,1fr);
}

Теперь я подумал , что будет делать именно то, что я хочу, но это 30px не имеет никакого эффекта, и каждая строка имеет одинаковую высоту. Можно ли смешать статическое значение и repeat()?

Я понимаю, что могу просто сделать 2 сетки - одну для заголовков и одну для дней - но мне любопытно, есть ли способ чище.

Демо здесь: https://codepen.io/anon/pen/yGEaOm

.calendar {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 30px repeat(auto-fill, 1fr);
}


/** Appearance styles that don't affect the layout */
.calendar {
  min-height: 200px;
}
.day {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="calendar">
  <div class="day">
    First
  </div>
  <div class="day">
    Second
  </div>
</div>

Answer 1

Короткий ответ

Вместо:

grid-template-rows: 30px repeat(auto-fill, 1fr)

Попробуйте это:

grid-template-rows: 30px repeat(auto-fit, minmax(10px, 1fr))

.calendar {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 30px repeat(auto-fit, minmax(10px, 1fr));
  grid-row-gap: 2px;
}

/** Appearance styles that don't affect the layout */
.calendar {
  min-height: 200px;
  padding: 2px;
  border: 1px solid red;
}
.day {
  border: 1px dashed black;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="calendar">
  <div class="day">First</div>
  <div class="day">Second</div>
</div>

---

Объяснение

Запишите это правило в своем коде:

grid-template-rows: 30px repeat(auto-fill, 1fr)

Это правило недействительно.

Поэтому он игнорируется браузером, и grid-template-rows возвращается к настройке по умолчанию: none (что означает, что все строки будут неявно созданы и имеют размер grid-auto-rows , чье значение по умолчанию auto).

Из спецификации:

& секта; 7.2. Явный размер дорожки: grid-template-rows и grid-template-columns Свойства

Значение none.

Указывает, что это свойство не создает явных дорожек сетки. (хотя явные дорожки сетки все еще могут быть созданы grid-template-areas).

Примечание. При отсутствии явной сетки любые строки / столбцы будут неявно генерируется, и их размер будет определяться grid-auto-rows и grid-auto-columns свойства.

Основная проблема заключается в том, что auto-fill (и auto-fit) нельзя комбинировать с внутренними или гибкими длинами, такими как auto, min-content или fr.

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

• Автоматические повторы (auto-fill или auto-fit) не могут быть объединены с внутренними или гибкими размерами.

& секта; 11. Сетка Определение размеров

• Встроенная функция определения размера: min-content, max-content, auto и fit-content()).

• Гибкая функция определения размера - это размер с единицей fr .

Следовательно, поскольку ваше правило ((auto-fill, 1fr)) содержит auto-fill с гибкой функцией определения размера (fr), оно не может работать.

Решение может заключаться в решении проблемы с minmax().

Вместо:

grid-template-rows: 30px repeat(auto-fill, 1fr)

Попробуйте это:

grid-template-rows: 30px repeat(auto-fill, minmax(10px, 1fr))

---

Подробнее:

• В чем разница между автоматическим заполнением и автоматическим заполнением?
• minmax терпит неудачу (недопустимое значение свойства)
• Почему автоподгонка или автозаполнение не работают должным образом с minmax?