min-content, max-content und grid-template-rows bei CSS Grid

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.

max-content und min-content

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

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.)“

 

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>