Ich habe gestern Rachel Andrew bei An Event Apart über CSS Grid Layout sprechen hören. Grid ist erstaunlich und der Tag wird bald kommen, an dem es das dominante Werkzeug für Web-Layouts sein wird. Dieser Tag ist jedoch noch nicht da, da kein stabiler Browser die neueste Version der Spezifikation ausliefert (höchstens hinter einem Flag).
Die gute Nachricht ist, dass die Spezifikation seit einigen Tagen sehr stabil ist und den Status „Candidate Recommendation“ erreicht hat. Da *alle* Browser auf Basis der Spezifikation entwickelt haben, ist es wahrscheinlich, dass eine weit verbreitete Unterstützung ohne Präfixe bald in allen stabilen Browsern verfügbar sein wird.
Die schlechte Nachricht ist, dass sie wahrscheinlich ohne Subgrid-Unterstützung kommen wird, ein Punkt, den Rachel in ihrem Vortrag gut hervorgehoben hat.
Hier ist ein typisches HTML für ein „Seitenlayout“
<body>
<header class="site-header"></header>
<main class="main-content"></main>
<aside class="sidebar"></aside>
<footer class="site-footer"></footer>
</body>Alle diese wichtigen Elemente sind direkte Kinder von <body>, sodass <body> das Grid sein kann und die vier Hauptobjekte auf diesem Grid angeordnet sind. Das ist so ähnlich wie bei einem von Rachels Beispielen bei GridByExample
Aber…
… sagen wir, wir wollten ein Grid aus Elementen erstellen, die nicht unbedingt in einer vollständig flachen HTML-Struktur wie gerade gesehen waren.
<body>
<header class="site-header">
<h1>I want to use the grid.</h1>
<nav>Me too!</nav>
</header>
<main class="main-content">
<ul class="schedule">
<li>Me three!</li>
<li>Me four!</li>
</ul>
</main>
...
</body>Wir können Grids *verschachteln*, genauso wie wir Flexbox in eine Grid-Zelle oder Flexbox in Flexbox verschachteln können, aber im obigen Beispiel können wir diese Kindelemente nicht gemeinsam am selben Grid teilnehmen lassen.
Sie können einige davon in Aktion sehen in Jen Simmons’ Jazz Poster Beispiel. Es gibt einige Elemente im DOM, die man sehen kann, und es wäre schön, wenn sie alle auf demselben Grid positioniert werden könnten, stattdessen werden sie auf verschiedenen Grids platziert.
Subgridding könnte etwas mühsam werden, da es irgendwie *„Subgrids bis zum Ende“* sind. Um selbst mein kleines Beispiel oben zum Laufen zu bringen, müsste es so aussehen…
body {
display: grid;
}
.site-header {
/* current spec way... */
display: subgrid;
/* old way... */
display: grid;
grid: subgrid;
}
.main-content {
display: subgrid;
}
.main-content > ul {
display: subgrid;
}Und das, ohne zu definieren, wie das Grid tatsächlich funktioniert.
Eric Meyer hat auch diese Notwendigkeit für Subgrids hervorgehoben
Ohne Subgrids müssten Sie entweder jedes Element, das Sie anordnen möchten, zu einem Kind des Body-Elements machen (oder was auch immer Sie zur Erstellung des Seiten-Grids verwendet haben), oder Sie müssten Segmente des Seiten-Grids in jedem verschachtelten Grid neu erstellen und jegliche Hoffnung auf Spalten aufgeben, die sich mit dem Inhalt mehrerer Seitenabschnitte dehnen können. Keine der beiden Lösungen ist attraktiv.
Er verwendete <form> Markup als Beispiel, bei dem <label>/<input> Paare notwendigerweise innerhalb von Containerelementen gruppiert sind, was bedeutet, dass sie nicht gemeinsam am selben Grid teilnehmen können.
Er forderte, dass Grid überhaupt nicht ausgeliefert wird, bis dies behandelt werden kann
Subgrids sind eine Hauptkomponente des Grid-Layouts und sollten Teil jeder Grid-Layout-Implementierung sein, sobald diese den Status „Developer Preview“ verlässt. Wenn das bedeutet, die Einführung von Grids zu verzögern, halte ich das für lohnenswert.
Dieses Schiff ist wahrscheinlich abgefahren …
… was die vollständige Subgrid-Unterstützung am Tag des „Ships“ von CSS Grid betrifft. Aber es lohnt sich wahrscheinlich, Lärm zu machen (wie dieses Blogposting zu schreiben), um anzuzeigen, dass dies ziemlich wichtig ist und so schnell wie möglich nach der ersten Runde von CSS Grid bearbeitet und veröffentlicht werden sollte. Das ist nicht meine Meinung, das ist, was Jen Simmons gesagt hat, sie wird sich bei Mozilla dafür einsetzen.
Und eine noch größere Gefahr ist, dass Subgrid als „gefährdet“ eingestuft wird und „während der CR-Phase fallen gelassen werden könnte“.
Und mit „Browser-Maker-Leuten“ sind, als interessanter Nebeneffekt, nicht immer *Mitarbeiter von Browser-Unternehmen*, die diese Arbeit machen, sondern oft externe Committer. Hier ist ein Blogposting über all dies von einem dieser externen Committer.
Das Risiko…
… ist, dass wir Grid-Layout so sehr lieben, dass wir unser HTML verformen, um es zum Laufen zu bringen. Wir machen unser HTML weniger zugänglich, um unsere Grid-Idee zum Laufen zu bringen. Wir ignorieren Semantik und flachen unser HTML ab.
Oder vielleicht macht das niemand. Aber hey, es wäre schön, die Werkzeuge zu haben, damit es nicht einmal ein Problem ist.
Ich möchte wissen, wie ich einen Konfigurator in Echtzeit-3D so entwickeln kann wie hier: http://viscircle.de/3d-konfiguratoren/?lang=en
Die wichtigste Frage ist die Frage. Wie implementiere ich den Konfigurator auf der Website? Das ist die Frage!
Ich weiß nicht, warum Sie diesen Blogbeitrag für Ihre Frage ausgewählt haben, aber ich kenne zufällig die auf der verlinkten Seite verwendete Technologie. Sie verwenden Blend4Web (https://www.blend4web.com/en/), eine Blender-basierte (https://www.blender.org/) Webbibliothek. Ich schätze, Sie können auch andere Optionen in Betracht ziehen.
Ich hoffe, dass wir bis zum vollständigen Versand von Grid die Unterstützung für
display: contents;erhalten werden. Wenn das wie angekündigt funktioniert, können wir Elemente aus dem Anzeige-Kontext „entfernen“, sodass Kinder von Kindern eine Ebene höher steigen und sich wie Kinder verhalten können. Mit anderen Worten, wir können einen Grid-Container der obersten Ebene haben, seinen Kindern sagen, dass sie sich mitdisplay: contents;nicht wie Grid-Kinder verhalten sollen, und den Enkelkind-Elementen erlauben, sich wie Grid-Kinder zu verhalten, als ob die mittlere Generation nicht existieren würde.Ups, ich habe den Link zu Rachels Beitrag über
display: contents;vergessen – https://rachelandrew.co.uk/archives/2016/01/29/vanishing-boxes-with-display-contents/Hey, danke fürs Schreiben! Ich denke, das Beispiel, wie Subgridding funktioniert, ist veraltet, wenn ich mich nicht irre. Laut der aktuellen Spezifikation benötigen Sie nur
display: subgrid;, um ein Subgrid zu erstellen, anstattdisplayund eine separategrid-Eigenschaft festzulegen. Kein großer Unterschied, aber es macht die CSS etwas ansprechender.Ich stimme definitiv zu, dass
subgrid-Unterstützung unerlässlich ist. Wir könnten uns behelfen, indem wir das übergeordnete Grid innerhalb der Kindelemente neu erstellen, aber letztendlich würden wir vor denselben Herausforderungen stehen wie bei Floats… Elemente, die ihre Umgebung ignorieren, und/oder Layouts, die nicht maßgeschneidert für ihren Inhalt sind.Bester Einsatz des „ich auch, ich auch, ich auch“-Witzes überhaupt…
Tolle Lektüre! Ich bin ein großer Fan von Susy und Flexbox, es hat mir sogar in einem bestimmten Fall geholfen, ein Legacy-Grid zu reproduzieren, das in die neue Welt des Apps portiert werden musste, um zu vermeiden, dass das gesamte Framework portiert oder das gesamte HTML neu geschrieben werden muss.
Ich benötige mehr Informationen zu Grids. Was bringt das für die einfache Website? Alles, was im Artikel angezeigt wird, ist jetzt mit Flexbox und regulären Block-Elementen machbar. Und angesichts der Tatsache, dass sich fast das gesamte Web in Richtung Mobilgeräte bewegt, ist fast alles einfach nur Blöcke.
Was vermisse ich bei Grids? Es erinnert mich ein wenig an einige frühe Websites, die von Printdesignern erstellt wurden und jede Seite zu einem riesigen Bild machten, um das Layout perfekt zu gestalten. Ist Grids ein Konzept von Printdesignern für das Web? Wenn ja, bin ich mir nicht sicher, ob es wirklich nötig ist.
Also, was vermisse ich an Grids? Was ist hier die Magie, die für einen Nicht-Printdesigner nicht offensichtlich ist?
http://lmgtfy.com/?q=css+grid
Sie können alles mit Flexbox tun, was mit Position absolut, Float, Tabellen usw. möglich ist, aber das macht es noch lange nicht zu einer guten Idee… Flexbox ist eigentlich nicht für Seitenlayouts gedacht, sondern eher für Komponenten (da es unmöglich ist, Dinge wie die Anpassung von Flex-Element-Höhen über mehrere Zeilen hinweg zu realisieren). Grid sollte die größeren Layouts und Strukturen viel besser handhaben können.
Grid-Spalten/Zeilen können automatisch dimensioniert werden (basierend auf ihrem Inhalt), aber trotzdem ausgerichtet werden. Ausrichtung und automatische Größenanpassung sind entscheidend. Wenn Sie eine Gruppe von Floats oder Flexboxen für Spalten haben, jede mit einer Gruppe für Zeilen darin, werden sie sich nicht ausrichten, es sei denn, Sie dimensionieren sie manuell.
Danke für die Hinweise, ich habe recherchiert und es scheint, dass einige Layout-Sachen mit Grid einfacher sein könnten. Aber Subgrids? Das scheint die größte Beschwerde dieses Posts zu sein, und alles, was alle sagen, ist, dass Flexbox für Inhalte ist, was anscheinend dasselbe wie ein Subgrid ist. Es scheint ein logischer Konflikt zu sein. (Oder mögen manche Leute einfach keine Flexbox?)
Die Grid-Spezifikation ist aus demselben Grund ziemlich gut wie Flexbox: weniger Markup, weniger Styles, weniger Bloat, einige nette Features wie Quellreihenfolge.
Sie konnten diese Dinge schon immer mit
position: absolute;und ähnlichem machen, aber sie waren unübersichtlich und erforderten viel Arbeit, um „richtig“ zu werden. Die Grid-Spezifikation macht solche Dinge einfach.Das Subgrid-Argument ergibt sich daraus, dass die meisten Werkzeuge von der Fähigkeit zur Rekursion profitieren. Wenn die Grid-Spezifikation auf einer flachen Ebene hilft, warum sollte sie dann nicht auch beim Verschachteln helfen?
Ich stimme in dieser Angelegenheit praktisch jedem zu… warten Sie einfach auf Subgrids.
Ich würde denken, dass das Risiko bei diesem speziellen Punkt gering ist. Ich bin auf der Seite, dass ich Grid erst verwenden möchte, wenn Sub-Grid verfügbar ist. Das bedeutet, dass ich, anstatt mein Markup vorübergehend zu ändern, um es mit Grid zum Laufen zu bringen, und dann wieder, sobald Sub-Grid Unterstützung hat, werde ich mit Floats und Flexbox weitermachen, bis die vollständige Lösung verfügbar ist.
Ich bin nicht daran interessiert, mit Grid Spec zu konkurrieren (da ich keinen Zugriff auf dieselben Variablen habe wie sie und das Gefühl habe, dass Grid Spec mich von meiner Obsession befreien wird), aber ich habe kürzlich ein PostCSS-Plugin entwickelt, das die Massen fernhalten könnte, wenn die Spezifikationsautoren auf Subgrid-Unterstützung warten wollen (das sollten sie).
Das Plugin wurde entwickelt, ohne etwas über Grid Spec zu wissen, enthielt aber viele ähnliche Konzepte.
Es teilt nicht dieselbe API, aber ich glaube nicht, dass das schlecht ist (da es Verwirrung stiften könnte, wenn die Spezifikation tatsächlich eintrifft). Die API ist jedoch sehr komponierbar, leichtgewichtig und bietet Dinge wie die Kombination fester CSS-Längen (z. B.
100px) und echter Brüche (1/4anstelle vonfr (flex-grow)Einheiten). Es bietet auch eine Möglichkeit, verbleibenden Platz zu füllen, und ich arbeite derzeit an einer Möglichkeit, Spalten und Zeilen zu generieren – sehr ähnlich zur Spezifikation, aber nicht perfekt (zum Zeitpunkt des Schreibens werden nur Spalten generiert).Am interessantesten ist, dass die generierten Größen extrahiert werden können, sodass Sie sie *überall* verwenden können, ohne sich mit dem Casten eines ganzen Grids herumschlagen zu müssen.
Ich habe versucht, das an einigen Stellen zu verbreiten, aber es nimmt nie Fahrt auf. Ich nehme an, jeder ist an dem Punkt, an dem er Grids durch Flexbox ersetzt hat und nicht „zurückgehen“ möchte. Das verstehe ich, aber Flexbox war nie ein Ersatz für Grid-Systeme (ernsthaft, es ist schlecht darin) – und das von mir erstellte Plugin konkurriert nicht mit Flexbox. Fühlen Sie sich frei, Flexbox zu verwenden, wo immer Sie es brauchen.
Dieses Plugin fungiert als Schritt zwischen traditionellen CSS-Grids und Grid Spec – und bietet einige coole Features wie einfaches Verhältnis-Sizing (http://alistapart.com/article/content-out-layout), die Grid Spec allein nicht bietet (ich werde diese Funktionalität portieren, wenn die Spezifikation landet). Und es funktioniert nahtlos in IE9, sodass Sie nicht all die Leute ignorieren müssen, die auf alten/unterfinanzierten Browsern festsitzen.
Ich bin gerade dabei, es neu zu refaktorieren. Ich werde fertig sein und die API wird in ein paar Tagen gesperrt sein. Ich würde nicht vorschlagen, im Moment damit irgendwelche Seiten zu erstellen, aber ein Sternchen zu hinterlassen und nächste Woche wieder nachzuschauen, ist wahrscheinlich keine schlechte Idee.
Fühlen Sie sich frei, es überall dort zu verwenden, wo Sie Grid Spec nicht verwenden dürfen (mindestens mehrere Prozent der Nutzer, selbst mit Evergreen-Browsern), und im Übergang, während die Spezifikationsautoren herausfinden, ob sie Subgrids unterstützen werden.
Oder auch nicht.
Chris, du hast mal einen Beitrag namens „Don’t Overthink It Grids“ geschrieben. Den habe ich nicht gelesen (habe ich doch). postcss-ant ist das Ergebnis.
Zwei Minuten Lesezeit über die Verwendung von display: contents, um dieses Problem zu lösen.
https://medium.com/@ollie_w/whats-so-great-about-display-contents-ce5628ebce86#.z9whk9f3c