Gleiche Spaltenbreiten in CSS Grid sind irgendwie komisch

Heutzutage ist alles flexibel. Wenn Sie grid-template-columns: 200px 200px 200px; schreiben, haben Sie zwar gleich breite Spalten, aber das ist ein seltener Fall. Was Sie normalerweise meinen, sind drei Spalten gleicher fließender Breite.

Dafür gibt es Bruchstücke von Einheiten, wie grid-template-columns: 1fr 1fr fr;. Das ist normalerweise in Ordnung, aber sie sind nicht sehr stabil wie Pixel. Ein großes Stück Medien (oder etwas wie ein <pre> oder ein langer Text wie eine URL) kann dazu führen, dass sich diese Spalten dehnen, und das ist fast nie das, was man will. Ich habe das "Grid Blowout" genannt. Die große Idee ist, dass die minimale Breite einer 1fr-Spalte auto ist, nicht 0. Mit anderen Worten: Diese verbreiterten Spalten sind einfach so schmal, wie sie sein können!

Um das zu beheben, können wir so machen

.el {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

..oder wir könnten es kürzer machen

.el {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

Es ist ein wenig umständlich, aber OK. Das muss man nur einmal lernen. Möglicherweise stößt man gar nicht auf dieses Problem, wenn man immer max-width für seine Medien festlegt und Zeilenumbrüche handhabt.

Wenn Sie Ihren Spalten wieder Stabilität verleihen möchten, ohne den minmax-Tanz aufzuführen, könnten Sie Prozentsätze anstelle von Pixeln verwenden und flexibel bleiben. Aber welchen Prozentsatz verwenden Sie? 33,33%? Das ist in Ordnung, solange Sie keinen gap haben – sonst addiert sich der Gap zur Breite und überläuft den Container. Sie könnten Gaps simulieren, indem Sie Innenabstände innerhalb der Spalten einfügen, aber das ist ein wenig wackelig und ungleichmäßig.

Das Ganze stammt aus einem großartigen Tweet von Wes Bos

🔥 Ein visueller Leitfaden, um Spalten mit gleicher Breite in CSS Grid zu erhalten pic.twitter.com/PY4yYokY18

— Wes Bos (@wesbos) 1. Mai 2020

Ich weiß, dass viele Leute damit zu kämpfen haben – basierend auf der Anzahl der E-Mails, die ich über den Artikel "Grid Blowout" erhalte – daher lohnt es sich, zu verstehen, warum das alles so ist, wie es ist. Es müsste wahrscheinlich einfacher sein, aber ich habe keine konkreten Vorschläge, wie das gehen könnte.