TL; DR: Gibt es etwas Ähnliches table-layout: fixed
für CSS-Grids?
Ich habe versucht, einen Jahresansichtskalender mit einem großen 4x3-Raster für die Monate und darin verschachtelten 7x6-Raster für die Tage zu erstellen.
Der Kalender sollte die Seite füllen, damit der Jahresrastercontainer eine Breite und Höhe von jeweils 100% erhält.
.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);
}
Hier ist ein funktionierendes Beispiel: https://codepen.io/loilo/full/ryXLpO/
Der Einfachheit halber hat jeder Monat in diesem Stift 31 Tage und beginnt an einem Montag.
Ich habe auch eine lächerlich kleine Schriftgröße gewählt, um das Problem zu demonstrieren:
Rasterelemente (= Tageszellen) sind ziemlich komprimiert, da sich mehrere Hundert davon auf der Seite befinden. Und sobald die Beschriftungen der Tagesnummern zu groß werden (spielen Sie mit den Schaltflächen oben links mit der Schriftgröße im Stift), wird das Raster nur größer und überschreitet die Körpergröße der Seite.
Gibt es eine Möglichkeit, dieses Verhalten zu verhindern?
Ich habe mein Jahresraster anfangs als 100% breit und hoch deklariert, daher ist dies wahrscheinlich der Ausgangspunkt, aber ich konnte keine gitterbezogenen CSS-Eigenschaften finden, die diesen Anforderungen entsprochen hätten.
Haftungsausschluss: Mir ist bewusst, dass es ziemlich einfache Möglichkeiten gibt, diesen Kalender ohne Verwendung des CSS-Rasterlayouts zu gestalten. Bei dieser Frage geht es jedoch mehr um das Allgemeinwissen zum Thema als um die Lösung des konkreten Beispiels.
quelle
Antworten:
Standardmäßig darf ein Rasterelement nicht kleiner als der Inhalt sein.
Rasterelemente haben eine Anfangsgröße von
min-width: auto
undmin-height: auto
.Sie können dieses Verhalten außer Kraft setzen , indem Rasterelemente Einstellung
min-width: 0
,min-height: 0
oderoverflow
mit einem anderen Wert alsvisible
.Aus der Spezifikation:
Hier ist eine detailliertere Erklärung zu Flex-Elementen, die jedoch auch für Rasterelemente gilt:
Dieser Beitrag behandelt auch potenzielle Probleme mit verschachtelten Containern und bekannte Rendering-Unterschiede zwischen den wichtigsten Browsern .
Nehmen Sie die folgenden Anpassungen an Ihrem Code vor, um Ihr Layout zu korrigieren:
überarbeiteter Codepen
1fr
vs.minmax(0, 1fr)
Die obige Lösung wird auf der Ebene der Rasterelemente ausgeführt. Eine Lösung auf Containerebene finden Sie in diesem Beitrag:
quelle
min-width: 0;
hilft nicht. Vermisse ich etwasDie vorherige Antwort ist ziemlich gut, aber ich wollte auch erwähnen , dass es ist ein festes Layout äquivalent für Netze, müssen Sie nur schreiben ,
minmax(0, 1fr)
anstatt1fr
als Track - Größe.quelle
minmax(0, 1fr)
funktioniert, weil1fr
es wirklich eine Abkürzung für istminmax(auto,1fr)
, was nicht der richtige Wert für die ursprüngliche Frage ist.Die vorhandenen Antworten lösen die meisten Fälle. Ich stieß jedoch auf einen Fall, in dem der Inhalt der Gitterzelle benötigt wurde
overflow: visible
. Ich habe es gelöst, indem ich es absolut in einem Wrapper positioniert habe (nicht ideal, aber das Beste, was ich weiß), wie folgt:https://codepen.io/bjnsn/pen/vYYVPZv
quelle
Eine einfachere Möglichkeit besteht darin, die maximale Breite des Rasterelements wie folgt festzulegen:
quelle