Eine Sammlung von Interessanten Fakten Über CSS Grid

0
53

Im letzten Jahr baute ich Eine Sammlung von Interessanten Fakten über die CSS-Grid-Layout, nachdem er einen workshop. Dieses Jahr wurde ich arbeitete an einem weiteren workshop habe ich gelernt, noch einige spannende Fakten über die layout-spec, die wir alle so lieben.

Natürlich werde ich nicht halten mein wissen um mich selbst. Ich bin glücklich zu teilen, meine Erkenntnisse noch einmal mit dir, die CSS-Tricks-community.

Zu verstehen, wie die `grid` – Verknüpfung funktioniert

Manchmal, Lesen und verstehen Teile der Gitter—oder eigentlich jeder andere—spec kann sehr hart sein.

Zum Beispiel, dauerte es eine ganze Weile mich zu verstehen, wie das Netz-Kürzel richtig. Die Spezifikation besagt, dass die zulässigen Werte sind:

<‘grid-template’> | <‘grid-template-rows’ – > / [auto-flow && dichten? ] <‘grid-auto-columns’>? | [ auto-flow && dichten? ] <‘grid-autwo-Zeilen’>? / <‘grid-template-columns’>

Sie können Sinn machen, wenn Sie sich Zeit nehmen oder wenn Sie erfahren sind im Lesen von specs. Ich versuchte mehrere Kombinationen und alle von Ihnen gescheitert. Was schließlich half, war mir ein Hinweis in der spec:

Beachten Sie, dass Sie nur geben Sie den expliziten oder den impliziten grid-Eigenschaften in einer einzigen grid-Erklärung.

Rachel Andrew hat eine Reihe von Beiträgen, die erklären, wie zu Lesen, eine Spezifikation, die Verwendung von CSS-Grid als ein Beispiel.

So, können wir bestimmen, eine Vielzahl von Dingen mit dem raster die Kurzform, aber eben nicht alle auf einmal. Hier sind einige Beispiele.

Mit `grid` zu Gunsten von `raster-Vorlage`

Die grid-template-Eigenschaft ist eine Kurzschrift für die Einstellung der raster-Vorlage-Spalten-grid-template-rows und grid-template-Bereiche in eine einzige Erklärung. Wir können das gleiche tun mit dem grid-Kürzel, die etwas kürzer ist.

raster: “one man” 200px
“zwei vier”
“drei-vier”
/ 1fr 2fr;

/* Kurzform: */
/*
grid-template-Bereiche: “eins”, “zwei vier” “drei vier”;
grid-template-rows: 200px;
grid-template-columns: 1fr 2fr;
*/

Das Kürzel erstellt drei Zeilen und zwei Spalten mit vier Namen-grid-Bereichen. Die erste Zeile hat eine explizite Höhe von 200px, während der zweite und der Dritte haben eine implizite Höhe von auto. Die erste Spalte hat eine Breite von 1fr und der zweite eine Breite von 2fr.

Finden Sie die Pen-grid-Kürzel – Bereiche, explizite Zeilen und Spalten von Manuel Matuzovic (@matuzo) auf CodePen.

Wollen Sie mehr wissen über den Unterschied zwischen einer expliziten und einer impliziten grid? Überprüfen Sie heraus diesen Beitrag schrieb ich zu dem Thema hier auf CSS-Tricks.

Wir haben nicht zu geben Bereiche an, wenn wir Sie nicht brauchen. Wir können die Gitter nur die Kurzform für die Definition von expliziten Zeilen und Spalten. Die beiden folgenden Ausschnitte sind im wesentlichen das gleiche tun:

grid-template-rows: 100px 300px;
grid-template-columns: 3fr 1fr;
grid: 100px 300px / 3fr 1fr;
Umgang mit impliziten Zeilen und Spalten

Es ist möglich, das Netz-Kürzel angeben grid-auto-flow als gut, aber es muss nicht genau so funktioniert, wie wir es erwarten. Wir können nicht nur fügen Sie die Zeile oder Spalte Schlüsselwort irgendwo in der Erklärung. Stattdessen haben wir die Verwendung der auto-flow-Schlüsselwort auf der richtigen Seite der Schrägstrich.

Wenn es auf der linken Seite der Schrägstrich, der Kurzschrift setzt grid-auto-flow-Zeile und erstellt von expliziten Spalten.

raster: auto-flow / 200px 1fr;

/* Kurzform: */
/*
grid-auto-flow: row;
grid-template-columns: 200px 1fr;
*/

Wenn es rechts vom Schrägstrich, der Kurzschrift setzt grid-auto-flow-Spalte und schafft explizite Zeilen.

grid: 100px 300px / auto-flow;

/* Kurzform: */
/*
grid-template-rows: 100px 300px;
grid-auto-flow: column;
*/

Wir können auch die Größe des impliziten tracks zusammen mit der auto-flow-Schlüsselwort, das setzt jeweils grid-auto-Zeilen-oder grid-auto-columns auf den angegebenen Wert.

grid: 100px 300px / auto-flow-200px;

/* Kurzform: */
/*
grid-template-rows: 100px 300px;
grid-auto-flow: column;
grid-auto-columns: 200px;
*/

Finden Sie die Pen-grid-Kürzel – explizite Zeilen und impliziten Spalten von Manuel Matuzovic (@matuzo) auf CodePen.

Funktion Abfragen im Rand

Die überprüfung der Unterstützung für CSS-Grid-funktioniert Super mit Feature-Anfragen, da alle Browser, die Unterstützung von Grid auch verstehen-Funktion Abfragen. Dies bedeutet, dass wir überprüfen können, ob ein browser unterstützt das alte oder das neue Skillung, oder beides. Beide, Fragen Sie? Beginnend mit Rand 16, den Rand nicht nur die Unterstützung der neuen Skillung, aber die alten als auch.

Also, wenn Sie wollen, zu unterscheiden zwischen den Versionen des Edge unterstützen, dass die neue Skillung und diejenigen, die nicht, Sie haben zu schreiben, Ihre Anfragen wie diese:

/* Rand 16 und höher */
@unterstützt (Anzeige: -ms-raster) und (display: grid) {
div {
width: auto;
}
}

/* Rand 15 und niedriger */
@unterstützt (Anzeige: -ms-raster) und (nicht (display: grid)) {
div {
margin: 0
}
}

Hier ist eine handliche kleine demo, die zeigt, welche feature-query-Trigger in den browser, die Sie geöffnet haben.

Finden Sie das Stift-display: grid-support-test von Manuel Matuzovic (@matuzo) auf CodePen.

Als seitliche Anmerkung, Sie sollten nicht über Bord gehen mit (mis)mit Hilfe von feature-Anfragen für browser-sniffing, weil die browser-Erkennung ist schlecht.

Die Angabe der genauen Anzahl der Elemente pro Spalte

Grid ist ideal für Seiten-layouts, aber es kann sehr nützlich sein auf Komponenten-Ebene als auch. Einer meiner Lieblings-Beispiele ist die Möglichkeit zur Angabe der genauen Anzahl der Elemente pro Spalte in einer multi-column-Komponente.

Sagen wir, wir haben eine Liste von 11 Stück und wir wollen eine neue Spalte hinzufügen, nach jedem vierten Punkt. Das erste, was wir tun wollen, nachdem Sie die Einstellung display: grid auf die Eltern zu ändern, wie die grid-auto-placement-Algorithmus arbeitet. Standardmäßig füllt es in jeder Reihe, die wiederum neue Zeilen Hinzugefügt werden, wie nötig. Wenn wir grid-auto-flow column, grid füllt jede Spalte wiederum statt, ist das, was wir wollen. Das Letzte, was wir tun müssen, ist geben Sie die Anzahl der Elemente pro Spalte. Dies wird möglich durch die Festlegung, wie viele explizite Zeilen wie nötig mithilfe des grid-template-rows-Eigenschaft. Wir können die Höhe jeder Zeile explizit oder macht Sie nur so groß wie Ihr Inhalt durch die Verwendung der auto-keyword.

ul {
display: grid;
grid-template-rows: auto auto auto auto;

/* oder kürzer und einfacher zu Lesen: */
/* grid-template-rows: wiederholen Sie(4, auto); */
grid-auto-flow: column;
}

Wenn wir ändern die Anzahl der Elemente pro Spalte 5, die wir nur hinzufügen, eine andere Spur, um die Spur-Auflistung oder nutzen wir das wiederholen-notation anstelle und einfach ändern Sie den ersten parameter auf den gewünschten Wert (grid-template-rows: repeat(5, auto)).

Finden Sie den Stift Begrenzten Anzahl von Elementen pro Spalte von Manuel Matuzovic (@matuzo) auf CodePen.

Sticky footers mit CSS Grid

Es gibt viele Möglichkeiten zum erstellen sticky footers in CSS. Einige von Ihnen sind hacky und kompliziert, aber es ist ziemlich einfach, mit Raster.

Sagen wir, wir haben eine *klassische* header, Hauptinhalt und footer page-Struktur.

<body>
<header>HEADER</header>
<main>MAIN</main>
<footer>FUßZEILE</footer>
</body>

Zuerst setzen wir die Höhe von html und body auf mindestens 100% des Viewports stellen Sie sicher, dass die Seite immer mit der vollen vertikalen Raum. Dann wenden wir grid-template-rows zum teilen des Körpers in drei Zeilen. Die erste (header) und den letzten (footer) – Zeile kann unabhängig von der Größe, die wir wollen. Wenn wir wollen, dass Sie immer so groß sein, wie deren Inhalte, wir setzen Sie einfach die Höhe auf auto. Die Zeile in der Mitte (main) sollte immer füllen den rest des Raumes. Haben wir nicht, um die Berechnung der Höhe, da können wir den Bruchteil der Einheit zu erreichen.

html – {
height: 100%;
}

body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}

Als Ergebnis der Haupt-Körper wächst und der footer passt sich entsprechend und bleibt auf den unteren Rand des Viewports.

Finden Sie den Stift CSS Grid Layout Sticky Footer von Manuel Matuzovic (@matuzo) auf CodePen.

Automatische minimum-Größe von grid-Elementen

Vor kurzem, Florian getwittert, dass er sich fragte, warum das abschneiden einzelne Zeile text in einem grid-Element war so kompliziert. Sein Beispiel illustriert hervorragend, eine interessante Tatsache, über die grid-Elemente.

Die Ausgangssituation ist ein drei-Spalten-raster mit einem Absatz in jedes raster-Element.

<div class=”grid”>
<div class=”item”>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo ipsum exercitationem voluptate, autem veritatis enim soluta beatae odio accusamus molestiae, perspiciatis sunt maiores quam. Deserunt, aliquid inventore. Ullam, fugit dicta.
</p>
</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}

Jeder Absatz sollte nur single-line und der Darstellung einer Ellipse am Ende der Zeile, wenn der Absatz länger ist als sein Eltern-Element. Florian gelöst, dass durch die Einstellung white-space auf nowrap, die Kräfte einer einzigen Zeile, versteckt überlauf und setzen text-overflow ellipsis.

p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Das würde gearbeitet haben, völlig in Ordnung, auf ein block-element, aber in diesem Gitter z.B., die Spalten zu erweitern, um die Breite des einzeiligen Absatz:

Finden Sie den Stift wie Automatische minimum-Größe von grid-Elemente von Manuel Matuzovic (@matuzo) auf CodePen.

Grob gesagt, geschieht dies, weil ein grid Element kann nicht kleiner sein als seine Kinder. Die default-min-Breite eines raster-Element (oder flex-Element) auf auto eingestellt ist, was nach der spec:

…gilt eine automatische minimum-Größe in der angegebenen Achse zu Gitter Elemente, deren überlauf sichtbar ist und die Länge von mindestens einer Spur, deren min-track-sizing-Funktion ist auto.

Das macht die Netz-und flex-Elemente flexibler, aber manchmal ist es nicht wünschenswert, dass der Inhalt in der Lage ist, sich zu dehnen, seine übergeordneten Elemente Breite. Um zu vermeiden, dass wir uns entweder ändern Sie die overflow-Eigenschaft des grid-Element auf etwas anderes als sichtbar oder stellen Sie die min-width auf 0.

Finden Sie den Stift Abschneiden von Text in CSS-Raster von Manuel Matuzovic (@matuzo) auf CodePen.

Lesen Sie mehr über Automatische Minimum-Größe von Grid-Elemente im raster spec.

Zusammenfassung

Hoffentlich werden diese letzten take-aways helfen Ihnen, sich wohler fühlen, schreiben und verwenden von Raster, da Sie für mich. Es gibt eine Menge von Details in diese neue Spezifikation, aber es wird mehr interessant und verständlich mit mehr Einsatz.