Verhindern Sie, dass Inhalte Rasterelemente erweitern

TL; DR: Gibt es etwas Ähnliches table-layout: fixedfü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.

Standardmäßig darf ein Rasterelement nicht kleiner als der Inhalt sein.

Rasterelemente haben eine Anfangsgröße von min-width: autound min-height: auto.

Sie können dieses Verhalten außer Kraft setzen , indem Rasterelemente Einstellung min-width: 0, min-height: 0oder overflowmit einem anderen Wert als visible.

Aus der Spezifikation:

6.6. Automatische Mindestgröße der Rasterelemente

Um eine vernünftigere Standard-Mindestgröße für Rasterelemente bereitzustellen, definiert diese Spezifikation, dass der autoWert von min-width/ min-heightauch eine automatische Mindestgröße in der angegebenen Achse auf Rasterelemente anwendet, deren Größe overflowist visible. (Der Effekt ist analog zu der automatischen Mindestgröße für Flex-Artikel.)

Hier ist eine detailliertere Erklärung zu Flex-Elementen, die jedoch auch für Rasterelemente gilt:

• Warum schrumpfen Flex-Elemente nicht über die Inhaltsgröße hinaus?

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:

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

ü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:

• Wie kommt es, dass minmax (0, 1fr) für lange Elemente funktioniert, während 1fr dies nicht tut?

Die 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)anstatt 1frals Track - Größe.

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:

.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

Eine einfachere Möglichkeit besteht darin, die maximale Breite des Rasterelements wie folgt festzulegen:

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