TL; DR: Czy jest coś podobnego table-layout: fixed
do 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.
źródło
Odpowiedzi:
Domyślnie element siatki nie może być mniejszy niż rozmiar jego zawartości.
Elementy siatki mają początkowy rozmiar
min-width: auto
imin-height: auto
.Można to zmienić poprzez ustawienie pozycji do siatki
min-width: 0
,min-height: 0
luboverflow
z jakiegokolwiek innego niż wartościvisible
.Ze specyfikacji:
Oto bardziej szczegółowe wyjaśnienie dotyczące elementów elastycznych, ale dotyczy to również elementów siatki:
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:
poprawiony codepen
1fr
vsminmax(0, 1fr)
Powyższe rozwiązanie działa na poziomie elementu siatki. Rozwiązanie na poziomie kontenera można znaleźć w tym poście:
źródło
min-width: 0;
nie pomaga. Czy coś mi brakuje?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)
zamiast1fr
jako wielkości toru.źródło
minmax(0, 1fr)
działa, ponieważ1fr
tak naprawdę jest skrótem dlaminmax(auto,1fr)
, co nie jest poprawną wartością dla pierwotnego pytania.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:https://codepen.io/bjnsn/pen/vYYVPZv
źródło
łatwiejszą rzeczą będzie ustawienie maksymalnej szerokości elementu siatki w następujący sposób:
źródło