Wir fühlten uns für einen Moment mit CSS-Grid verwöhnt. Es kam heiß und schnell in allen großen Browsern gleichzeitig an. Jetzt, da wir mehr Nutzung sehen, wollen die Leute mehr von Grid.
Michelle Barker listet ihre Wünsche auf (und ich werde meinen Kommentar danach einfügen)
- Stilistische Zeilen- und Spaltengrößen. Ich habe auch gehört, dass direkte Styling von Grid-Zellen gewünscht wird, anstatt ein Element dort platzieren zu müssen und dieses Element zu stylen.
- Mehrere Abstandswerte. Ich wollte das erst letzte Woche, und mir wurde gesagt, ich solle eine leere Spalte oder Zeile anstelle eines Abstands verwenden. Die Größe dieser Spalte kann gesteuert werden, und die Dinge werden entsprechend platziert, um sie wie einen Abstand zu behandeln. So okay, außer dass das für implizite Grids nicht besonders benutzerfreundlich ist.
- Autoflow-Muster. Das ist clever. Schau dir Michelles Anwendungsfall und Vorschlag an.
calc()mit derfr-Einheit. Das ist ein Gehirnverdreher. Ich kann verstehen, dass man etwas wiecalc(1fr - 100px)machen möchte, aber dann ist der verbleibende Platz nicht 100px zu kurz und 1fr wird neu berechnet, um diesen Platz zu füllen? Scheint endlos schleifig.- Rasterzellen mit Seitenverhältnis. Ich vermute, wenn wir das bekommen, wird es eine generische Lösung für das Seitenverhältnis sein, die auf jedem Element funktioniert, einschließlich Elementen, die auf einem Grid platziert werden.
Subgrid wird ebenfalls stark nachgefragt, und ich verstehe warum. Beim Erstellen des letzten Seitenlayouts, das ich mit Grid erstellt habe, habe ich mir stark gewünscht, die Gesamtlinien des Seitenrasters innerhalb von Unterelementen teilen zu können.
Rachel Andrew sprach vor etwa sechs Monaten in CSS Grid Level 2: Here Comes Subgrid über seinen Status. Ich bin mir nicht sicher, wo es jetzt steht, aber ich glaube nicht, dass es bisher von einem Browser unterstützt wird. (Ich bin mir nicht einmal sicher, ob die Spezifikation technisch fertig ist.)
Brad äußerte den Wunsch hier
Container-Abfragen und Subgrid würden meine Design-System-Arbeit so viel einfacher machen.
Definiere ein Raster und wirf ein paar Komponenten hinein, dann sieh zu, wie sie sich an das übergeordnete Raster anpassen und gut aussehen, unabhängig von den Abmessungen des Containers.
— Brad Frost (@brad_frost) 11. Februar 2019
Und Ken Bellows schreibt
- Wenn wir Subgrid mit
grid-template-areasinnerhalb der Karten kombinieren (lies meinen letzten Beitrag, wenn du Grid Areas nicht kennst, es wird dich umhauen), werden komplexe reaktionsfähige kartenbasierte Layouts trivial.- Die Aussicht auf ein Subgrid auf beiden Achsen gibt uns eine Möglichkeit, relative Rasterpositionierung zu erreichen, zumindest für semantisch gruppierte Elemente, wie ich es mir oben gewünscht habe! Gruppiere deine Elemente in einem Container, positioniere deinen Container im Raster, mache diesen Container zu einem Subgrid auf beiden Achsen und deklariere deine Spuren relativ zur Rasterposition des Subgrid-Elements!
- Zwischen Flexbox, Grid,
display: contentsund Subgrids werden wir endlich alles haben, was wir brauchen, um sehr schlanke, saubere, semantische Markup ohne jeglichen Schnickschnack oder rein strukturelle Elemente zu schreiben. Das wird ein großer Gewinn für Barrierefreiheit, SEO und einfach für Entwickler sein, die dein Markup verstehen wollen!
Eric Meyer nannte Subgrid vor drei Jahren eine essentielle Funktion
Deshalb bin ich zu demselben Schluss gekommen, zu dem andere Grid-Experten (wie Rachel) bereits gekommen sind: Subgrids sind eine Hauptkomponente des Grid-Layouts und sollten Teil jeder Grid-Layout-Implementierung sein, sobald sie aus dem Developer-Preview-Status herauskommt. Wenn das bedeutet, das Erscheinen von Grids zu verzögern, denke ich, dass es das wert ist.
Und natürlich will jeder immer noch natives Masonry. ;)
Die Subgrid-Funktion ist Teil der Level-2-Spezifikation. Es ist unglaublich wichtig, dass die Leute, die möchten, dass Browser diese Funktion (oder eine andere Funktion) implementieren, immer wieder danach fragen.
Wenn Subgrid also eine Funktion ist, die Sie möchten, schreiben Sie bitte auf, warum, geben Sie Ihre Anwendungsfälle an, kommentieren Sie hier. Wir haben die Spezifikation, sie wird zweifellos verfeinert werden, wenn Browser-Implementierer damit arbeiten, aber so funktioniert die Spezifikationsentwicklung. Die CSS WG beendet eine Spezifikation nicht und wirft sie Browser-Ingenieuren vor. Es ist ein iterativer Prozess. Was wir jetzt brauchen, ist, einige Implementierungen in Browsern zu sehen – auch hinter einem Flag. Zu diesem Zeitpunkt können wir alle damit experimentieren und Feedback geben.
Natives Masonry – um Himmels willen, ja!
Ich habe eine bescheidenere Wunschliste.
SVG-Elemente skalieren nicht unbedingt in allen Browsern mit CSS Grid gleich. Wenn Sie eine Spalte mit variabler Breite haben und diese mit einem SVG-Element gefüllt werden soll, das sich ausdehnt, um zu passen, dann wird es das wahrscheinlich in Chrome mit minimalem CSS und den richtigen
preserveAspectRatio-Einstellungen für das SVG-Element schön tun. Aber das funktioniert in anderen Browsern nicht so, wie Sie es in Chrome gebaut haben.Ich hätte auch gerne eine CSS-Grid-Möglichkeit, ein Bild auf einer Seite zu platzieren, mit Text, der darum herumfließt. Dies fehlt jedoch, da es bedeutet, dass ich entweder Floats verwende oder ein visuelles Designproblem anders löse, was eine schöne Herausforderung ist.
Ich bin mir bei Subgrids nicht so sicher, da ich denke, dass ‚inherit‘ ebenso wie
display: contentsweit geht.Beim Versuch, ein Formular in CSS Grid umzuwandeln, stellte ich neulich fest, dass das ursprüngliche Formular viel zu viele Container und zu viel Div-Suppe verwendete, mit Divs um die Labels und Divs um die Eingabefelder mit einem größeren Div-Container um jedes Paar. Ich wollte nur Label gefolgt von Eingabefeld ohne Klassentags und definitiv keine Divs, um es ordentlich zu gestalten.
Das Problem war, dass die Vorlage für das Backend und das Frontend dieses speziellen CMS verwendet wurde. Daher konnte ich die Formular-Insto-De-Cruft nicht einfach nehmen und sie für alle Geräte in kürzester Zeit stylen. Ich hätte rekursiv
display:contentsauf die Divs anwenden können, um zu bekommen, was ich wollte, aber das Problem war eigentlich der Inhalt, der die übliche Div-Suppe aus dem Jahr 2006 war.Daher glaube ich, dass das Fehlen von Subgrid eine gute Sache ist. Es erzwingt Disziplin und Dokumentenstruktur, anstatt bestehende Inhalte zu manipulieren, damit sie mit dem neuen, glänzenden CSS Grid funktionieren. Erben funktioniert für einige Grid-Deklarationen gut und
display: contentsfunktioniert auch gut.Bezüglich der Gestaltung von Abständen und Randdingen denke ich, dass die aktuelle Funktionsweise großartig ist, mit cleverer Nutzung von Pseudo-Elementen, die einen weit bringen. Ich hatte gehofft, dass Grid-Abstände bedeuten würden, dass ich niemals mehr Margin oder Padding verwenden müsste, leider bin ich noch nicht in diesem gelobten Land angekommen.
Das sind CSS Exclusions, derzeit nur im Microsoft Edge unterstützt. Rachel Andrews hat einen großartigen Artikel darüber hier. Wir sind daran interessiert, dies in Zukunft möglicherweise in Chromium zu integrieren – daher wäre es großartig, wenn Sie Ihre Unterstützung hier hinzufügen würden.
Dafür brauchen Sie Exclusions: https://rachelandrew.co.uk/archives/2018/11/09/editorial-layouts-exclusions-and-css-grid/
Ich war auf Exclusions gestoßen, aber ich weiß, dass das bei den Zielplattformen, die ich im Moment habe, nicht funktionieren wird. Außerdem kein Polyfill – nicht, dass ich an Polyfills glaube.
Für mich ist die aktuelle Lösung also, anders zu denken. Anstatt die Hervorhebung an der Seite mit einer schönen Abbildung darin zu haben, legen Sie sie einfach in eine andere Zeile, stellen Sie sich vor, jeder ist nur auf Mobilgeräten und fertig damit.
Re: Grid-Spuren als Lücken
Vielleicht wäre es nützlich, wenn wir Grid-Bereiche als deaktiviert markieren könnten, damit die automatische Platzierung dort nicht stattfindet?
Mein Showstopper war, dass man Grid-Zellen nicht animieren kann. Ich hatte Grid als Hauptlayout mit einem wiederverwendbaren Muster (Desktop) integriert, um dynamisch eine zentrale Spalte zu erstellen. https://codepen.io/BRacicot/pen/NBxGwJ
Die Unfähigkeit, das Grid in einer Subgrid-ähnlichen Weise wiederzuverwenden, hat die Erfahrung für mich ruiniert und zusätzlichen Code verursacht. Hier konnte ich den Vorteil der Nutzung nicht erkennen.
Dann kam das Animationsproblem. Ich glaube, die Spezifikation besagt, dass 5 Dinge animierbar sein sollen, wobei Browser nur 3 integriert haben.
grid-template-columnsundgrid-template-rowsgehören nicht dazu… Ich habe meine Grid-Strategie verworfen und beabsichtige, wiederverwendbare Flexbox-Layouts zu erstellen, und das funktioniert tatsächlich fantastisch…Meiner Meinung nach ist Grid noch lange nicht bereit für den ernsthaften Produktionseinsatz.