Wenn Sie einen Container mit begrenzter Breite haben, z. B. eine zentrierte Textspalte, ist das „Ausbrechen“ aus diesem Container, um ein Element in voller Breite zu erstellen, eine Trickserei. Vielleicht ist der beste Trick der mit relativer Positionierung links und einem negativen, viewport-basierten linken Rand. Während er seine Vor- und Nachteile hat (z. B. erfordert er versteckten Überlauf auf der body, der Container muss zentriert sein usw.), ist er zumindest einfach durchzuführen und alles andere im Container macht fröhlich weiter.
Es gab einige Beiträge über einen anderen Weg, dies zu tun, nämlich mit CSS Grid
- Tyler's „Breaking Out with CSS Grid Layout“, auf den Rachel in einem eigenen Beitrag antwortete.
- Rachel behandelte diese Vollbreiten-Elemente in einem weiteren Beitrag, „Editorial Design Patterns With CSS Grid And Named Columns“
- Selen Goras „Setting the box in container to full width with CSS Grid“
- Bryans Robinsons „Use CSS Subgrid to layout full-width content stripes in an article template“
Das Einzige, was all diese gemeinsam haben, ist, dass sie ein Rand-zu-Rand-Grid voraussetzen. Ich dachte mir immer wieder: „Nutzen die Leute wirklich CSS Grid für ihre gesamte Seitenlayout?“ So im Grunde body { display: grid; }¹? Die Artikel selbst verwenden tendenziell einen Klassennamen, aber die Annahme ist, dass dieses Elternelement ein Vollbildschirm-Container ist.
Ich habe ein wenig herumgefragt, und es gab ein Murmeln von: „Ja, das mache ich total.“ Also, cool, es ist etwas, das Leute tun. Mein erster Gedanke war, dass das aus ein paar Gründen umständlich erscheint
- Ein typischer „Header“ und „Footer“ sind vollbreit, daher scheint es im Vergleich zu einem Header, der einfach nur ein Block-Level-
<header>oben (oder unten) auf der Website ist, viel Arbeit zu sein, diese explizit im Grid zu platzieren, über die richtige Anzahl von Spalten zu strecken und das aktuell zu halten, während man an den Spalten herumfummelt. Sie können immer noch ein Rand-zu-Rand-Grid in der Mitte haben und Block-Level-Elemente darüber und darunter. - Alle Elemente in einem „Artikel“ explizit in eine mittlere Spalte zu platzieren (z. B.
article > * { grid-columns: 2 / 3; }, nur um etwas gelegentlich durch Überspannen von mehr Spalten zu „dehnen“, fühlt sich für mich seltsam an. Wenn 95 % des Inhalts in einer zentrierten Spalte leben, fühlt sich etwas sowohl robuster als auch entspannter an, diesen Inhalt einfach in ein Elternelement zu legen, das das Layout handhabt, anstatt dass jedes einzelne Element sich selbst im Grid platzieren muss und das Endergebnis so aussieht, als ob es sich alles in einem gemeinsamen Elternteil befindet.
Ich hasse die Technik nicht unbedingt, bemerke nur, dass sie mir irgendwie seltsam vorkommt. Aber ich bin wahrscheinlich alt.
- Ich würde davon abraten,
display: grid;direkt auf dembody-Element zu verwenden. Ein häufiges Problem: Browser-Erweiterungen können Elemente in den DOM innerhalb des Body einfügen, die dann in Ihrem Grid platziert würden und Ihr Layout durcheinanderbringen könnten. Habe ich schon erlebt. Ich würde sagen, es ist genauso wie die React-Best-Practice, nicht den gesamten Body zu binden, sondern einen Div-Kindknoten zu verwenden, der effektiv dasselbe ist, nur auf einen Selektor beschränkt.
Als jemand, der dieses CSS-Muster häufig verwendet (und einer der oben genannten Autoren ist), füge ich diesem Designmuster noch einen weiteren Nachteil hinzu. Denken Sie daran, ich LIEBE dieses Designmuster ;)
Wenn Sie dies verwenden, verlieren Sie den Zugriff auf die
float-Eigenschaft.floatfunktioniert nicht auf Grid-Elementen. Nun, Sie können einige kleinere Workarounds mit zusätzlichem Markup durchführen, aber dieses Designmuster soll überflüssiges Markup entfernen. Es ist ein Kompromiss, den ich normalerweise einzugehen bereit bin, aber ich vermisse Floats auf meinem Blog gelegentlich definitiv.Das andere, was ich erwähnen werde, ist, dass ich nicht glaube, dass die Artikel ein Vollbreiten-Grid-Container voraussetzen. Ich verwende dieses Designmuster tatsächlich auf meiner Website mit einem Blog-Post-Layout, bei dem der Artikelinhalt zu etwa 80 % links und eine Seitenleiste rechts ist. Die Vollbreiten-Ausbrüche finden nur innerhalb dieser 80 % statt, was einige interessante Designelemente erzeugt.
Bezüglich des ersten Punkts können Sie alle Spalten automatisch mit
grid-column: 1/-1;
Ah, ja. Wir haben eine Designerin, die sich krankenhaft daran erfreut, dass wir verzweifelt schreien.
Ausbrüche aller Formen und Größen, sie diskriminiert nicht, Bilder/Videos, die links/rechts ausbrechen können, normalerweise mit Text oder CTA-Buttons darin, die auf dem Hauptgrid zentriert bleiben müssen.
https://codepen.io/sliver37/pen/eYmjPGj
Erfordert einen Browser, der Subgrid für das Beispiel unterstützt. Ich wünschte, es wäre besser unterstützt.
Ich habe versucht, eine universelle Grid-Struktur zu erstellen, um genau diese Idee zu ermöglichen und gleichzeitig einen zentrierten Bereich zu haben. Ich sehe keinen Nutzen darin, Header/Main/Footer in einem einzigen Grid zu mischen. Daher habe ich 3 separate Grids verwendet.
Hier ist das Beispiel. Es hat 6 Spalten, 2 Leerraumspalten, die auf 10 Pixel „Rand“ auf jeder Seite schrumpfen. Die Mitte besteht dann aus 3 Spalten.
Im Nachhinein hätte ich hier 12 Spalten für ein vollständiges Layoutsystem hinzufügen sollen, aber das habe ich nie getan.
Der –max-content-width ist die Messung, um eine maximale Mittelspalte wie 1280px oder so zu erstellen. Wenn ich diese durch 3 teile, erhalte ich automatische und anpassbare Spaltendimensionen, die von der Bildschirmbreite abhängen.
Ich bin sicher, dass dies erheblich verbessert werden könnte, aber ich fand einige Aspekte davon unausgereift und bin noch nicht wieder darauf zurückgekommen.
Dann, um automatisch den gesamten Inhalt in diese Struktur passen zu lassen.
Um eine Vollbreiten-Zeile mit Inhalt zu erstellen.
Ich bin sicher, dass etwas daran dran ist, aber es hat einige Hürden mit sich gebracht, aber es ist unter Umständen einfach und unterhaltsam zu verwenden, da alles so einfach angeordnet ist und Vollbreiten-Elemente leicht einzufügen sind.
Hier ist ein Beispiel:
Es ist immer eine Ehre, einen meiner Artikel auf CSS-Tricks erwähnt zu sehen!
Ich gebe zu, dass ich ein wenig verwirrt von dieser Schlussfolgerung bin
Mein Ziel bei der Darstellung eines asymmetrischen Beispiels nach Einführung der Technik war es, deutlich zu machen, dass dies nicht der Fall war. Vielleicht habe ich unabsichtlich den „Aufhänger“ dessen, was die Grid-basierte Lösung einzigartig macht, „vergraben“?
Ich kann Grid einfach nicht für das gesamte Seitenlayout verwenden, da es auf mobilen Browsern nicht gut mit
height: 100vh;funktioniert und Flex Ihnen erlaubt,flex-grow: 1auf einer Flex-Spalte zu verwenden, und es passt sich an, ohne100vhzu verwenden. Ich habe versucht, es mit einem Grid innerhalb der Flex-Spalte zum Laufen zu bringen, aber es gab Browser-Inkonsistenzen und es schien nur in Chrome zu funktionieren.Ich verstehe nicht, warum Leute float vermissen, wenn man dasselbe mit
float: left; => justify-self: start;
float: right; => justify-self: end;