TL; DR: Есть ли что-то похожее table-layout: fixed
на CSS-сетки?
Я попытался создать календарь на год с большой сеткой 4x3 для месяцев и вложенными сетками 7x6 для дней.
Календарь должен заполнить страницу, поэтому контейнер годовой сетки получает ширину и высоту 100% каждый.
.year-grid {
width: 100%;
height: 100%;
display: grid;
grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}
Вот рабочий пример: https://codepen.io/loilo/full/ryXLpO/
Для простоты, каждый месяц в этой ручке имеет 31 день и начинается в понедельник.
Я также выбрал смехотворно маленький размер шрифта, чтобы продемонстрировать проблему:
Элементы сетки (= дневные ячейки) довольно сжаты, поскольку на странице их несколько сотен. И как только метки чисел дня станут слишком большими (не стесняйтесь поиграть с размером шрифта на ручке с помощью кнопок в левом верхнем углу), сетка просто увеличится в размере и превысит размер тела страницы.
Есть ли способ предотвратить такое поведение?
Сначала я объявил, что моя годовая сетка имеет ширину и высоту 100%, поэтому, возможно, с этого и стоит начать, но я не смог найти какие-либо свойства CSS, связанные с сеткой, которые бы соответствовали этой потребности.
Отказ от ответственности: я знаю, что есть довольно простые способы стилизовать этот календарь без использования CSS Grid Layout. Однако этот вопрос больше касается общих знаний по теме, чем решения конкретного примера.