Letztes Jahr fragte ich: „Werden wir unser HTML für CSS-Grids abflachen?“
Das Problem ist, dass Elemente nur dann am selben CSS-Grid teilnehmen können (oder Flexbox übrigens), wenn sie Geschwister sind. In einigen Fällen könnten wir also dazu angehalten sein, auf HTML-Semantik zugunsten des Layouts zu verzichten (nicht gut).
Eine Antwort darauf ist `display: contents;` – ein magischer neuer Display-Wert, der den Container im Wesentlichen verschwinden lässt und die Kindelemente zu Kindern des nächsthöheren Elements im DOM macht.
Schneller Vorlauf bis heute: Chrome liefert es aus, WebKit liefert es aus, und Firefox hat es ausgeliefert. Stimmen Sie dafür in Edge hier ab.
Möchten Sie es besser verstehen? Rachel Andrew schrieb „Verschwindende Boxen mit display: contents“ und erklärt, wie alles funktioniert.
Dieser Wert wird nützlich, wenn Sie ein Element hinzufügen möchten, weil es semantisch sinnvoll ist, aber nicht visuell. Vielleicht haben Sie Inhalte, die als Artikel sinnvoll markiert sind, und dieser Artikel ist dann ein Flex-Element in Ihrem Layout, ABER die Elemente, die Sie wirklich als Flex-Elemente haben möchten, sind in diesem Artikel verschachtelt. Anstatt Ihr Markup zu vereinfachen und das Artikel-Element zu entfernen, um diesen inneren Elementen die Teilnahme am Flex-Layout zu ermöglichen, könnten Sie die von Artikel generierten Boxen mit `display: contents` entfernen. Sie erhalten dann das Beste aus beiden Welten: semantisches Markup plus die visuelle Darstellung, die Ihr Design erfordert. Das klingt für mich gut.
Manuel Rego versucht es auch zu erklären.
display: contentsbewirkt, dass das div keine Box generiert, sodass sein Hintergrund, Rahmen und seine Füllung nicht gerendert werden. Geerbte Eigenschaften wie Farbe und Schrift haben jedoch erwartungsgemäß Auswirkungen auf das Kindelement (span).
Ein sehr verwandtes Thema zu all dem: Subgrids. Wahrscheinlich buchstäblich `display: subgrid;`. Es ist wahrscheinlich weniger wichtig in Bezug auf die Beibehaltung von Semantik als `display: contents;`, aber auch anders.
Eric Meyer nannte Subgrids *essentiell*.
Grid-Layout ist der erste ernsthafte Kandidat, der dieses Loch in den letzten zwei Jahrzehnten füllt, und ich möchte nicht, dass sie von Anfang an behindert werden. Subgrids sind für die Einführung von Grids unerlässlich. Ich hoffe, sie werden so schnell wie möglich implementiert.
Und um den Unterschied zu verstehen, schrieb Rachel Andrew auch „Warum display: contents nicht CSS Grid Layout subgrid ist“.
Sie werden eine Unterhaltung über Subgrid in CSS Grid Layout nicht weit führen, ohne dass jemand vorschlägt, dass `display: contents` sowieso die meisten Probleme löst, also brauchen wir Subgrid wirklich? Das ist wirklich nicht der Fall, `display: contents` löst zwar eine Reihe von Problemen, aber das sind andere Probleme als die, bei denen uns Subgrid helfen würde.
Vielen Dank fürs Teilen!
CSS Grids: Die neue <table>?
So eine Art… ja… aber ohne die Browser-Eigenheiten, Wartungsprobleme oder schlechte Semantik.
<
<table> wurde für Tabellen gemacht… CSS Grid ist für Layouts gemacht.
Ich wäre sehr daran interessiert zu hören, wie Sie diesen Vergleich anstellen könnten?
Großartig, aber ich muss die Dinge immer noch in IE11 zum Laufen bringen, also noch eine Funktion, die ich nicht nutzen kann >: (
Ich werde Grids vielleicht komplett überspringen, klingt wie das Durcheinander, das `display:table-cell` war.
Wow! Ernsthaft? Sie sind sarkastisch, oder?
Ich war auch skeptisch gegenüber Grids, und dann dachte ich, na gut, hier ist ein Ort, an dem es die Dinge einfacher und sauberer machen sollte (basierend auf dem Feedback, das ich von Seiten wie dieser erhalten habe). Und es hat besser funktioniert, als ich es mir je hätte vorstellen können.
Probieren Sie Grids einfach aus, es kann Ihre Perspektive auf Layoutkontrolle komplett verändern. Ich verwende es hauptsächlich für Spalten im Kleinformat, Kachel-Layouts und Anzeigen mit unbekannter Breite/Spaltenanzahl. Es ist verdammt genial.
Danke für den Tipp, ich freue mich darauf, mehr über CSS Grid zu lernen. Es gibt einen neuen kostenlosen Kurs von Wes Bos, den ich gerade beginnen werde.