Zapobiegaj rozszerzaniu elementów siatki przez zawartość

TL; DR: Czy jest coś podobnego table-layout: fixeddo siatek CSS?

Próbowałem utworzyć kalendarz z widokiem na rok z dużą siatką 4x3 dla miesięcy i tam zagnieżdżonymi siatkami 7x6 dla dni.

Kalendarz powinien wypełniać stronę, tak aby kontener siatki lat miał szerokość i wysokość 100% każdy.

.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);
}

Oto działający przykład: https://codepen.io/loilo/full/ryXLpO/

Dla uproszczenia każdy miesiąc w tym zagrodzie ma 31 dni i zaczyna się w poniedziałek.

Wybrałem też śmiesznie mały rozmiar czcionki, aby zademonstrować problem:

Elementy siatki (= komórki dnia) są dość skondensowane, ponieważ na stronie jest ich kilkaset. A gdy tylko etykiety z numerami dni staną się zbyt duże (możesz swobodnie bawić się rozmiarem czcionki w piórze za pomocą przycisków w lewym górnym rogu), siatka po prostu powiększy się i przekroczy rozmiar strony.

Czy istnieje sposób, aby temu zapobiec?

Początkowo zadeklarowałem, że moja siatka roczna ma 100% szerokości i wysokości, więc prawdopodobnie od tego należy zacząć, ale nie mogłem znaleźć żadnych właściwości CSS związanych z siatką, które pasowałyby do tej potrzeby.

Zastrzeżenie: zdaję sobie sprawę, że istnieją dość łatwe sposoby na stylizowanie tego kalendarza bez użycia układu siatki CSS. Jednak to pytanie dotyczy bardziej ogólnej wiedzy na ten temat niż rozwiązania konkretnego przykładu.

Domyślnie element siatki nie może być mniejszy niż rozmiar jego zawartości.

Elementy siatki mają początkowy rozmiar min-width: autoi min-height: auto.

Można to zmienić poprzez ustawienie pozycji do siatki min-width: 0, min-height: 0lub overflowz jakiegokolwiek innego niż wartości visible.

Ze specyfikacji:

6.6. Automatyczny minimalny rozmiar elementów siatki

Aby zapewnić bardziej rozsądny domyślny rozmiar minimalny dla elementów siatki, niniejsza specyfikacja definiuje, że autowartość min-width/ min-heightrównież stosuje automatyczny rozmiar minimalny w określonej osi do elementów siatki, których overflowjest visible. (Efekt jest analogiczny do automatycznego rozmiaru minimalnego nałożonego na elementy elastyczne).

Oto bardziej szczegółowe wyjaśnienie dotyczące elementów elastycznych, ale dotyczy to również elementów siatki:

• Dlaczego elementy flex nie zmniejszają się ponad rozmiar zawartości?

Ten post obejmuje również potencjalne problemy z zagnieżdżonymi kontenerami i znane różnice w renderowaniu między głównymi przeglądarkami .

Aby naprawić układ, wprowadź następujące zmiany w kodzie:

.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 */
}

poprawiony codepen

1fr vs minmax(0, 1fr)

Powyższe rozwiązanie działa na poziomie elementu siatki. Rozwiązanie na poziomie kontenera można znaleźć w tym poście:

• Dlaczego minmax (0, 1fr) działa dla długich elementów, a 1fr nie?

Poprzednia odpowiedź jest dobra, ładna, ale chciałem też wspomnieć, że nie jest stałą równoważny układ do sieci, wystarczy napisać minmax(0, 1fr)zamiast 1frjako wielkości toru.

Istniejące odpowiedzi rozwiązują większość przypadków. Jednak natknąłem się na przypadek, w którym potrzebowałem zawartości komórki siatki overflow: visible. Rozwiązałem to, umieszczając absolutnie w opakowaniu (nie idealne, ale najlepsze, jakie znam), na przykład:

.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

łatwiejszą rzeczą będzie ustawienie maksymalnej szerokości elementu siatki w następujący sposób:

//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
  }