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. Однако этот вопрос связан скорее с общими знаниями по этой теме, чем с конкретным примером.