Schneller Tipp Benennen Sie Ihre CSS-Rasterlinien, nur für den Fall

In jedem CSS-Grid hat jede Zeile eine Indexnummer, auf die wir uns beziehen können, um Gitterelemente zu platzieren. Wir können jedoch auch jede dieser Gitterlinien benennen, um die Arbeit mit den Rasterlayouts zu vereinfachen. Lass uns einen Blick darauf werfen!

Gitter kommt

Die häufigste Antwort auf ein Grid-Lernprogramm ist "Aber wann kann ich das verwenden?" Und es ist eine faire Frage. Tatsache ist: Grid ist kommt und es wird bald hier sein.

"CSS Grid wird ab März 2017 standardmäßig in Chrome und Firefox unterstützt." - Eric Meyer

Wenn Sie es noch nicht angeschaut haben, ist jetzt die Zeit!

Netzzeilennummern

Wenn wir ein Gitter deklarieren, erhält jede Zeile eine Indexnummer: 

Hinweis: Sofern das Layout nicht mit festgelegt ist Richtung: RTL;, Diese Zahlen beginnen oben links im Raster und arbeiten sich nach rechts unten. 

Wir können auf diese Zahlen verweisen, um Gitterelemente zu platzieren:

.item Gitterspalte: 2; Rasterreihe: 3; 

In diesem Beispiel unser .Artikel Das Element wird ab Spalte 2 und Zeile 3 positioniert:

Explizite Gitterliniennamen

Bei komplexeren Rastern können Sie sich vorstellen, dass die Referenzierung von Zahlen durch Zahlen ein wenig verwirrend sein kann. Aus diesem Grund können wir mit dem Grid-Modul unsere Zeilen explizit benennen, wenn wir unsere Gridspalten und -zeilen deklarieren.

Lassen Sie uns ein Beispiel verwenden, das wir in dieser Serie verwendet haben. Hier ist unsere grundlegende 3 × 3-Gittererklärung:

.grid-1 display: grid; Rastervorlagen-Spalten: 100px Auto 100px; Raster-Vorlage-Zeilen: 60px 130px 50px; Gitterlücke: 20px; 

Jetzt können wir unsere Spalten- und Zeilenwerte mit Zeilennamen (was immer wir wollen) mit eckigen Klammern umschließen:

.grid-1 display: grid; Gitter-Template-Spalten: [Start] 100px [Mitte-Start] Auto [Letzter-Spalte-Start] 100px [Fertig stellen]; Grid-Template-Zeilen: [Kopfanfang] 60px [Hauptstart] 130px [Hauptende] 50px [Zeilenende]; Gitterlücke: 20px; 

Wir können jetzt Elemente mit Namen anstelle von Zahlen positionieren:

.item Gitterspalte: Mitte-Start; Rasterzeile: Kopfanfang; 

Einige Hinweise:

• Diese Namen können an Ihre eigenen beschreibenden Bedürfnisse angepasst werden. Denken Sie also logisch darüber nach, was Ihnen hilft, Bereiche des Gitters zu erkennen und zu merken.
• Die ursprünglichen Zeilennummern bleiben in Betrieb, sodass Sie sie weiterhin verwenden können.
• Sie können mehrere Namen für eine Zeile angeben, zum Beispiel: [Fußzeilen-Startzeile-5] usw.
• Selbst wenn Sie Ihre Gitterlinien benennen, müssen Sie sie nicht verwenden. Daher ist es eine gute Gewohnheit, nur für den Fall zu sein.

Implizite Gitterliniennamen

Wenn wir absichtlich Dinge tun, zum Beispiel die Benennung von Gitternetzlinien, heißt das explizit. Wenn etwas impliziert wird, aber nicht direkt angegeben wird, wird dies als Sein bezeichnet implizit. Wir haben uns explizit mit der Benennung von Gitterlinien befasst, aber es gibt auch Umstände, unter denen Zeilen implizit Namen gegeben werden.

Möglicherweise erinnern Sie sich an ein vorheriges Tutorial, dass es möglich ist, Gitterbereiche zu definieren.

Wir können vier Netzbereiche wie folgt definieren:

.grid-1 / *… vorhandene Stile * / grid-template-areas: "header header header" "Hauptseitenleiste" "Fußzeile Fußzeile Fußzeile"; 

Dies gibt uns folgendes:

Benennung eines Gitterbereichs Header weist den vier Begrenzungslinien automatisch Namen zu. Die Zeilenlinien werden um Kopfanfang und Kopfende, und ebenso werden auch die beiden Spaltenzeilen Kopfanfang und Kopfende. Gleiches gilt für die anderen Bereiche, denen Zeilennamen gegeben werden Hauptstart, Hauptende, Sidebar-Start und so weiter.

Hinweis: Umgekehrt betrachten Sie explizit benannte Zeilen im gleichen Format (Kopfanfang und Kopfende) erstellt einen benannten Gitterbereich von Header. 

Wir können diese Zeilennamen genauso wie zuvor verwenden, um Artikel zu positionieren. Sie sind zusätzlich zu den von Ihnen selbst definierten Namen und den ursprünglichen Zeilenindexnummern vorhanden.

Ende der Zeile

Das wars für diesen schnellen Tipp! Denken Sie daran: Gewöhnen Sie sich an, Ihre Linien und Bereiche für eine einfachere Netzverwaltung und -wartung zu benennen.