Full Bleed

Wir haben bereits Techniken behandelt, wenn Sie ein Element in voller Breite innerhalb einer Spalte mit begrenzter Breite wünschen, z. B. ein Bild von Rand zu Rand innerhalb einer schmaleren Textspalte. Es gibt jede Menge Techniken.

Vielleicht meine Lieblings-Utility-Klasse

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Das funktioniert, solange die Spalte zentriert ist und es Ihnen nichts ausmacht, overflow-x auf der Spalte (oder dem Body) zu verstecken, da dies andernfalls einen horizontalen Überlauf auslösen kann.

Es gab in letzter Zeit einige Diskussionen über andere Ideen...

Josh Comeau hat darüber gebloggt, dass man ein Drei-Spalten-Grid einrichten und den Inhalt hauptsächlich in der mittleren Spalte platzieren könnte, aber dann die Möglichkeit hätte, daraus auszubrechen

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(65ch, 100%)
    1fr;
}
.wrapper > * {
  grid-column: 2;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / -1;
}

Ich finde das clever. Ich würde es wahrscheinlich benutzen. Aber ich gebe zu, es gibt ein paar Dinge, die mir komisch vorkommen. Zum Beispiel...

• Jetzt ist alles innerhalb des Containers ein Grid-Element. Keine große Sache, aber die Elemente verhalten sich leicht unterschiedlich. Keine Randkollaps zum Beispiel.
• Man muss das Standardverhalten, das man möchte, auf jedes einzelne Element anwenden. Anstatt dass sich Elemente natürlich übereinander stapeln, muss man sie auswählen und ihnen sagen, wohin sie gehen sollen, und sie sich selbst stapeln lassen. Fühlt sich ein wenig weniger nach dem natürlichen Lauf des Webs an. Dann braucht man immer noch eine Utility-Klasse, um das Full-Bleed-Verhalten zu erzielen.

Was mir an der Idee gefällt, ist, dass sie einem ein buchstäbliches Grid zum Arbeiten gibt. Zum Beispiel könnte der linke Abstandshalter halb so breit sein wie der rechte, und das ist völlig in Ordnung. Es wird dieser Raum vorbereitet, um potenziell genutzt zu werden, so wie Ethan in seinem Artikel über eingeschränkte Grids darüber sprach.

Kilian Valkhof reagierte auf den Artikel mit dieser Idee

body > *:not(img):not(video) { 
  position: relative;
  max-width: 40rem;
  margin: auto;
}

Auch sehr clever. Dies schränkt die Breite von allem ein (in welchem ​​Container auch immer, und das müsste nicht der Body sein) *außer* den Elementen, die ausbrechen sollen (was auch eine Utility-Klasse sein könnte, und nicht unbedingt Bilder und Videos).

Auch hier, für mich, dieses Gefühl, dass ich jedes einzelne Element auswählen und ihm grundlegende Informationen über das Layout geben muss, fühlt sich etwas seltsam an. Nicht "nicht benutzen"-seltsam, nur etwas, das ich nicht gewohnt bin zu tun. Historisch gesehen bin ich eher damit vertraut, einen Container zu dimensionieren und zu positionieren und den Inhalt dieses Containers sich ohne weitere Anweisungen selbst anordnen zu lassen.

Wissen Sie, was mir am besten gefällt? Dass wir so viele leistungsstarke Layout-Tools in CSS haben und wir über die Vor- und Nachteile sprechen, genau das zu erreichen, was wir wollen.