Не дозволяйте вмісту розширювати елементи сітки

TL; DR: Чи є щось подібне table-layout: fixedдо сіток 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% шириною та висотою, тому, мабуть, із цього слід почати, але я не змогла знайти жодних властивостей CSS, пов’язаних із сіткою, які б відповідали цій потребі.

Відмова: Я знаю, що існують досить прості способи стилю цього календаря без використання CSS Grid Layout. Однак це питання скоріше стосується загальних знань з теми, ніж вирішення конкретного прикладу.

За замовчуванням елемент сітки не може бути меншим за розмір вмісту.

Елементи сітки мають початковий розмір min-width: autoі min-height: auto.

Ви можете перевизначити цю поведінку, встановлюючи елементи сітки в min-width: 0, min-height: 0або overflowз будь-яким значенням, крім visible.

З специфікації:

6.6. Автоматичний мінімальний розмір елементів сітки

Щоб забезпечити більш розумний мінімальний розмір за замовчуванням для елементів сітки, ця специфікація визначає, що autoзначення min-width/ min-heightтакож застосовує автоматичний мінімальний розмір у зазначеній осі до елементів сітки, overflowє visible. (Ефект аналогічний автоматичному мінімальному розміру, накладеному на гнучкі елементи).

Ось більш детальне пояснення, що стосується гнучких елементів, але воно також стосується елементів сітки:

• Чому гнучкі елементи не зменшуються минулого розміру вмісту?

Ця публікація також охоплює потенційні проблеми з вкладеними контейнерами та відомі відмінності щодо відображення серед основних браузерів .

Щоб виправити макет, внесіть ці корективи у свій код:

.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 проти minmax(0, 1fr)

Наведене вище рішення працює на рівні елемента сітки. Про рішення рівня контейнера див. У цій публікації:

• Чому minmax (0, 1fr) працює для довгих елементів, тоді як 1fr не працює?

Попередня відповідь досить гарна, але я також хотів зазначити, що для сіток є фіксований макет, еквівалентний, вам потрібно просто написати minmax(0, 1fr)замість 1frрозміру доріжки.

Існуючі відповіді вирішують більшість випадків. Однак я зіткнувся з випадком, коли мені потрібен зміст комірки сітки overflow: visible. Я вирішив це, абсолютно розташувавшись в обгортці (не ідеально, але найкраще, що я знаю), як це:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;  
}

.day-item-wrapper {
  position: relative;
}

.day-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  background: rgba(0,0,0,0.1);
}

https://codepen.io/bjnsn/pen/vYYVPZv

простіше зробити так, щоб встановити максимальну ширину елемента сітки так:

//for the container
.gridContainer{
    display: grid;
    grids-templates-column: repeat (12, 1fr);
 }

 //for the grid item
 .gridItem{
       max-width: 100%;
       grid-column: span 4  //4 can be any number from1-12 as we specified in the grid template
  }