min-content, max-content und grid-template-rows bei CSS Grid
Geschrieben am:
min-content und max-content sind sehr praktisch beim CSS-Grid-Layout zur Definition von Rasterspalten. Was aber bewirken sie genau bei der Definition von Rasterzeilen?
Beginnen wir mit den Rasterspalten. Angenommen, wir definieren ein Raster folgendermaßen:
.raster {
display: grid;
grid-gap: 20px;
grid-template-columns: max-content min-content;
}
Dann wird die erste Spalte so breit, wie der Inhalt höchstens braucht, die zweite so breit wie der Inhalt mindestens braucht.
Deswegen wird bei max-content
der Text nicht umbrochen und die Spalte entsprechend breit. Bei min-content
steuert bei Text das längste Wort die Breite.
Im Internet sind mir immer wieder Beispiele begegnet, in denen max-content
und min-content
bei grid-template-rows
- also bei der Zeilendefinition - eingesetzt werden. Ich konnte jedoch keinen Unterschied zur Verwendung von auto
sehen und hab jetzt endlich mal recherechiert.
Die Lösung ist einfach: min-content
und max-content
machen bei grid-template-rows
dasselbe wie auto
, es gibt keinen Unterschied. Im Wording vom W3C (https://drafts.csswg.org/css-sizing-3/#sizing-values):
- "min-content: If specified for the inline axis, use the min-content inline size; otherwise compute to the property’s initial value.
- max-content: If specified for the inline axis, use the max-content inline size; otherwise compute to the property’s initial value."
Das heißt: bei der Inline-Achse gibt es einen Unterschied zwischen den Werten, aber sonst nicht - da sie sonst eben dem initialen Wert des Elements entsprechen. In westlichen Sprachen wie dem Deutsch oder Englischen ist die Inline-Achse die horizontale, das heißt es gibt einen Unterschied bei der Spaltendefinition, aber nicht bei der Zeilendefinition.
Sara Soueidan sagt es ebenfalls bei der CSS-Referenz bei Codrops deutlich: "max-content, min-content and fit-content only have effect in the inline progression direction: they are equivalent to auto when set on the height of horizontal elements (horizontal languages like English, Arabic, Spanish, etc.)"