ТЛ;ДР: есть что-нибудь вроде таблица-макет: фиксированная
для CSS-сеток?
Я пытался создать через год-календарь с большой 4х3 решетка для месяцев и в них вложенные 7х6 решетки для дней.
Календарь должен заполнить страницы, так что год сетки контейнер получает ширину и высоту 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% в ширину и высоту, так что's наверное смысл начинать, но я не мог'т найти любой сетки-связанные свойства CSS, что бы'вэ установлен, что нужно.
Предупреждение: Я'м известно, что есть несколько довольно простых способов, чтобы стиль Этот календарь просто без использования CSS-макет сетки. Однако, этот вопрос больше касается общих знаний на эту тему, чем решать на конкретном примере.
По умолчанию элемент сетки не может быть меньше, чем размер его содержания.
Элементы сетки имеют начальный размер мин-ширина: авто " и " мин-высота: авто
.
Вы можете переопределить это поведение, установив элементы сетки к мин-ширина: 0
, мин-высота: 0
или переполнения
с любое значение, отличное от visible
.
Спецификации:
6.6. Автоматическая минимальный размер сетки пункты
, Чтобы обеспечить более разумный минимальный размер по умолчанию для элементов сетки, это спецификация определяет, что значения
Auto
, ОООмин-ширина
/мин-высота
также применяется автоматический минимальный размер указанной оси элементов решетки которогопереполнения
этовидно
. (Эффект аналогичен автоматической минимальный размер налагаемых на элементы изгиба.)
Здесь's более подробное объяснение по пунктам Flex, но это касается элементов сетки, а также:
Этот пост также описывает потенциальные проблемы с вложенные контейнеры и известных оказание различий между основными браузерами.
Чтобы исправить ваш макет, внести эти изменения в ваш код:
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #fff;
grid-gap: 2px;
min-height: 0; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
.day-item {
padding: 10px;
background: #DFE7E7;
overflow: hidden; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
1fr
против минмакс(0, 1fr)
Решение выше работает на уровне элементов сетки. Для решения уровня контейнера, см. Этот пост:
В предыдущем ответе довольно хорошо, но я также хотел бы упомянуть, что там это фиксированный макет эквивалент для решеток, нужно просто написать надежная(0, 1fr)
вместо 1fr
как ваш размер трека.
Существующие ответы решения большинстве случаев. Однако, я наткнулся на случай, когда мне нужен контент из сетки-ячейки переполнения: видимый
. Я решил ее абсолютно позиционирование в оболочку (не идеал, но лучшее, что я знаю), такой:
``
.месяц-решетки { отображение: сетка; сетка-шаблон: повторение(6, 1fr) / повторение(7, 1fr); фон: #ФФФ; сетка-ГАП: 2 пикселя; }
.день-предмет-фантик { позиция: относительная; }
.день-пункт { позицию: абсолютная; топ: 0; слева: 0; справа: 0; дно: 0; обивка: значение 10px;
фон: формате RGBA(0,0,0,0.1); } `` https://codepen.io/bjnsn/pen/vYYVPZv