Einfache Benannte Gitter

0
19

Ich denke, der benannte raster-Bereiche in der CSS-Grids als ” bring-your-own syntaktischen Zucker. Sie nicht unbedingt brauchen (Sie könnte express-grid-Platzierung in anderer Hinsicht), aber es kann machen, dass die Platzierung intuitiver. Und, hey, wenn ich falsch liegen, korrigiert mich in den Kommentaren.

Sagen Sie ein 3-Spalten-raster:

.grid {
display: grid;
raster-Abstand: 1rem;
grid-template-columns:
200px 1fr 1fr;
}

Keine Zeilen definiert; diese sind implizit und wird angezeigt, wie gebraucht. Wir definieren Sie, wir sind gerade nicht, denn wie die meisten Situationen, in web-design, wir kümmern uns nicht, wie groß die Elemente sind, — die Höhe wird bei Bedarf vergrößert, um Platz für den Inhalt.

Nun, wie tun wir etwas im oberen linken position in der Startaufstellung? Wir könnten sagen, das raster zu platzieren, es gibt wie dieses:

.item {
grid-column: 1 / 2; /* start an der ersten grid-Spalte, – Zeile und-Ende in der zweiten */
}

Das funktioniert, obwohl, die .item besser sein, das erste Kind .grid. Ansonsten, etwas anderes kann implizit werden dort platziert .Artikel wird kick down, um die nächste open-Zeile. Wenn wir wollten, super sicher, um es in der oberen linken, könnten wir die Zeile:

.item {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

Jetzt wird es in die top-Links für sicher, auch wenn andere Positionen ausdrücklich dort platziert (Sie werden nur überlappen). Wir können auch verkürzen die Dinge mit dem grid-Bereich-Eigenschaft:

.item {
grid-Bereich: 1 / 1 / 2 / 2;
}

Alle, die 1 und 2 werden könnten intuitiv genug für jetzt, aber die zahlen werden ein bisschen viel mehr komplexe Gitter mit Spalten und Zeilen-Platzierung.

Überprüfen Sie diese. Während wir bei der Definition der Spalten können wir Namen Sie mit einem separaten Grundstück:

.grid {
display: grid;
raster-Abstand: 1rem;
grid-template-columns:
200px 1fr 1fr;
grid-template-Bereiche:
“pro-b”
“pro-c-d”;
}

Jeder zitiert-Gruppe in der grid-template-Bereich ist eine Zeile. Im inneren sind die Namen, die ich gerade nachgeholt. Könnte so ziemlich alles sein, solange es für Sie sinnvoll ist. Sehen Sie, wie das Wort “pro” zweimal wiederholt wird, es auf zwei Zeilen? Das ist wichtig, da es besagt, dass konnten wir ein grid-Element, wo dieser Wert “pro” ist und es wird in der ersten der drei Spalten und erstreckt sich über zwei Zeilen. Ziemlich intuitiven, ja?

Wir legen es so aus:

.pro-Funktionen {
/* statt */
grid-Bereich: 1 / 1 / 2 / 3;
/* nun können wir tun */
grid-Bereich: mit dem pro;
}

Hier das einfache Beispiel:

Finden Sie den Stift Einfachen Namen Grid-Bereichen von Chris Coyier (@chriscoyier) auf CodePen.

Willst du noch mehr anschaulich mit einem raster? Versuchen Sie, zeichnen Sie es in Ihrem CSS-Kommentare.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die social sharing links oben, der Sicherheit und des backups, Markdown-support, site-Suche, das Kommentar-Formular, postulieren soziale Netzwerk-verbindungen und vieles mehr!