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

Я пытаюсь сделать календарь в виде сетки. У каждого дня недели будет заголовок. Моя цель - установить высоту заголовка (то есть первой строки в сетке) на 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>


html css css-grid
person Quasipickle    schedule 08.01.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

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

Вместо того:

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)

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

введите описание изображения здесь

Поэтому он игнорируется браузером и _6 _ возвращается к своему значению по умолчанию: none (что означает, что все строки будут неявно создаваться и иметь размер _ 8_, значение по умолчанию - 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. Размер сетки

Следовательно, поскольку ваше правило ((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))

Подробнее:

person Michael Benjamin    schedule 08.01.2019
comment
Ооооо, значит проблема была не в комбинации 30px и repeat (), а в комбинации автозаполнения и 1fr. Спасибо за ответ. - person Quasipickle; 08.01.2019