Es fiel mir auf, als wir über Flexbox und gap sprachen, dass ein Grund, warum wir manchmal zu Flexbox greifen, darin besteht, einige Boxen nebeneinander zu legen und sie etwas zu verteilen.
Mein Gehirn greift in dieser Situation immer noch zu Flexbox, und mit gap wird es das wahrscheinlich auch weiterhin tun. Es ist jedoch erwähnenswert, dass Grid dasselbe auf seine eigene besondere Weise tun kann.
So wie das
.grid {
display: grid;
gap: 1rem;
grid-auto-flow: column;
}Sie sehen dort alle gleich breit aus, aber das liegt nur daran, dass sich kein Inhalt darin befindet. Mit Inhalt werden Sie sehen, dass sich die Boxen aufgrund der natürlichen Breite dieses Inhalts gegenseitig verdrängen. Wenn Sie etwas Kontrolle ausüben müssen, können Sie jederzeit width / min-width / max-width für die Elemente festlegen, die in diese Spalten fallen – oder sie mit grid-template-columns festlegen, aber ohne die tatsächliche Anzahl der Spalten festzulegen, und dann min-content die Breite bestimmen lassen.
.grid {
display: grid;
gap: 1rem;
grid-auto-flow: column;
grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
}Flexible Grids sind das Coolste.
Ein weiterer Gedanke… wenn das gesamte Grid selbst nur so breit sein soll wie der Inhalt (d.h. weniger als 100% oder nach Bedarf auto), dann beachten Sie, dass display: inline-grid; existiert.
Ja, das ist der große und grundlegende Mangel von CSS Grid. Normale CSS-Spalten erledigen diese Aufgabe, aber das Problem dabei ist, dass der Browser vertikal und nicht horizontal berechnet. Hast du dafür eine Lösung?
CSS Columns sind von Print abgeleitet, daher tun sie, was Spalten seit Jahrhunderten tun – mehr oder weniger erfolgreich. Da CSS Regions nicht mehr existieren, ist dies der einzige verfügbare Layoutmodus, bei dem Inhalte schrittweise von einem „Layoutbereich“ in einen anderen fließen, auch bekannt als Fragmentierung.
Flexbox und Grid können auch Spalten, aber anders. Hier wird die Fragmentierung auf Elementebene angewendet, sodass der „Fluss“ eher grob ist.
Wenn Sie nicht möchten, dass Grid automatisch neue Spalten erstellt, dann sagen Sie es ihm und deklarieren Sie die Anzahl und Größe(n), wie Sie es bei CSS Columns tun müssen, und es wird entsprechend handeln (zusätzlich: die Spalten können individuelle Breiten haben).
Spalten, Flexbox und Grid verwenden unterschiedliche Paradigmen für unterschiedliche Layoutanforderungen und sie alle haben ihre Stärken und Schwächen. Sie sind nicht gegenseitig ausschließend! Eine clevere Kombination der drei kann Ihnen schließlich das gewünschte Layout für den spezifischen Inhalt, den Sie haben, geben.
Vielleicht wird Houdini uns (Ihnen) zu Hilfe kommen, sobald es weit verbreitet unterstützt wird.
Leider sind CSS Grid-Brüche in realen Beispielen überhaupt nicht nutzbar. Wenn Sie zum Beispiel einen Abschnitt mit „grid-template-columns: 2fr 1fr;“ und einen anderen Abschnitt mit „grid-template-columns: 1fr 1fr 1fr;“ haben, werden diese Spalten NICHT ausgerichtet, wenn grid-gap größer als Null ist. Dies ist entscheidend für die Erstellung eines echten, Bootstrap-ähnlichen Grids.
Sie könnten versuchen, mit den Rahmen der Elemente innerhalb des Haupt-Grid-Containers zu spielen… allerdings müssten Brüche wirklich diesen Buff erhalten, um eine echte Alternative zu werden.
Wenn sie die gleiche Breite haben, entweder durch den übergeordneten Container oder nicht, sollten sie sich ausrichten. Brüche teilen, soweit ich weiß, einfach prozentual. Also wären 1fr in 30px 10px.
Ich könnte mich irren, ich bin ein Neuling. Aber ich habe schon einige Grids, Sub-Grids und parallele Grids erstellt und sie erfolgreich ausgerichtet (wenn auch nach einiger intensiver Neulingsarbeit).
Nun, sie befinden sich eindeutig in separaten Grids, warum sollten Sie erwarten, dass sie sich ausrichten?
In diesem Fall sollten Sie ein Grid-Element verwenden, das mehrere Spalten überspannt. Damit sie sich wirklich ausrichten, sollten sie separate Zeilen im selben Grid sein, damit sie die gleiche Spaltenschablone haben.
FR repräsentiert einen Bruchteil des verfügbaren Restraums und NICHT unbedingt eine spezifische Breite der Gesamtbreite des Containers: Wenn eine einzelne Spalte aufgrund eines großen Bildes oder eines sehr langen Wortes überläuft, schrumpft der fr-Wert.
Außerdem: Die Summe der Abstände zwischen drei Spalten (2 * Abstand) ist natürlich größer als die Breite eines einzelnen Abstands. Was also vom anfänglichen „100%“ der Containerbreite übrig bleibt, nachdem alle Abstandbreiten abgezogen wurden, wird zwischen den „fr“-Tracks/Spalten verteilt. In Ihrem Quasi-3-Spalten-Szenario verhalten sie sich wie Prozente – und dort würden sich auch keine Ränder ausrichten.
Um eine gleiche Verteilung der Spalten zu erzielen, sollten Sie sie so deklarieren: „grid-template-columns: repeat(12, 1fr)“ und einzelne Grid-Elemente nach Bedarf Spalten/Tracks überspannen lassen. So werden Abstände nicht berücksichtigt und Ihre Elemente und Spalten richten sich richtig aus. Sie werden wahrscheinlich viel weniger Markup und CSS haben, wenn Sie das Bootstrap/Foundation Layout-Paradigma aufgeben.
.cols-12 {display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem}
.span-2 {grid-column:span 2}
.span-3 {grid-column:span 3}
.full {grid-column:1/-1}
Bootstrap „Grids“ haben das gleiche Problem, kompensieren dies jedoch mit bizarrer Prozentangaben zur Definition der Spaltenbreiten für alle Arten von Containern oder verwenden negative Ränder. Und eine Giga-Menge von Utility-Klassen, um Dinge „auf“ ihrem Grid herumzuschieben.
Funktioniert dieser Code bei niemand anderem?
Sowohl Firefox als auch Chrome melden einen ungültigen Eigenschaftsfehler, und es scheint nicht das zu tun, was der Artikel vorschlägt. Ich kann jedoch nicht herausfinden, was falsch daran ist…
Codepen: https://codepen.io/jparks/pen/dyYEpPz.
Versuchen Sie etwas wie 150px anstelle von min-content.