Share
In früheren Tutorials haben wir gelernt, wie Sie ein Raster einrichten und seine expliziten Eigenschaften definieren (z. B. Raster-Vorlage-Spalten und Raster-Vorlagenbereiche) und sogar einige der impliziten Eigenschaften (wie Raster-Auto-Spalten). In diesem Tutorial werden wir uns die Abkürzungseigenschaft ansehen Gitter was alles in einer einzigen Anweisung schnell behandelt.
Beginnen Sie wie üblich mit der Deklaration Anzeige: Raster; auf Ihrem Container. Als nächstes benutzen Sie die Gitter Eigenschaft zum Anordnen Ihrer Zeilen und dann Ihrer Spalten:
.grid-1 display: grid; Raster: 100px Auto 300px / Wiederholung (2, 1fr) 100px;
Die obige Anweisung sagt, wir wollen drei explizite Zeilen von 100px, auto und 300px. Und (mit der wiederholen() Funktion) zwei Spalten von 1fr, dann eine von 100px. Es ist genau das gleiche wie diese längere Version:
.grid-1 display: grid; Raster-Vorlage-Zeilen: 100px Auto 300px; Rastervorlagen-Spalten: Wiederholung (2, 1fr) 100px;
Beide Aussagen geben uns folgendes:
Implizite Werte fordern wir von Grid über die expliziten Werte hinaus, die wir definieren. In dem Gitter Kurzum, wir können die beiden nicht kombinieren, also müssen wir eine Wahl treffen. Schauen Sie sich das zum Beispiel an:
.grid-1 display: grid; Raster: automatischer Fluss 100px / 1fr 100px;
In diesem Fall haben wir uns an explizite Spalten gehalten (eine von 1fr, eine andere von 100px), aber unsere Zeilen verwenden eine abgekürzte Form von Netz-Auto-Fluss und Raster-Auto-Zeilen. Es sagt „Wenn Sie weitere Spuren zum Raster hinzufügen möchten, fügen Sie sie als Zeilen hinzu. Und mache jeden 100px hoch. “ Es ist das gleiche wie dieses:
.grid-1 display: grid; Rastervorlagen-Spalten: 1fr 100px; Raster-Auto-Flow: Reihe; Raster-Auto-Zeilen: 100px;
Dies ist ein ziemlich voreingestelltes Verhalten, aber wir sehen eine größere Änderung, wenn wir stattdessen von unserem impliziten Raster die Verwendung zusätzlicher Spalten verlangen:
.grid-1 display: grid; Raster: 100px 300px / automatischer Fluss 100px;
Dies gibt uns zwei Reihen von 100px und 300px und setzt dann effektiv Gitter-Auto-Flow: Spalte;. Es ist das gleiche wie:
.grid-1 display: grid; Raster-Vorlage-Zeilen: 100px 300px; Gitter-Auto-Flow: Spalte; Raster-Auto-Spalten: 100px;
Jetzt platziert der Algorithmus für die automatische Platzierung Elemente von oben nach unten und fügt Spalten nach rechts hinzu, wenn der Platz nicht mehr ausreicht:
Hinweis: Wir können nicht erklären automatischer Fluss in beiden Reihen und Spalten, die nicht funktionieren.
Wenn Sie an unser Tutorial zurückdenken Wenn Sie das CSS-Grid "Auto-Placement-Algorithmus" verstehen, werden Sie sich daran erinnern, dass wir besprochen haben spärlich und dicht; Schlüsselwörter, die beschreiben, wie Elemente in ein Raster gepackt werden. Diese können auch zusammen verwendet werden automatischer Fluss, so was:
.grid-1 display: grid; Raster: 100px 300px / dichter automatischer Fluss 100px;
Vorlagenbereiche sind eine Möglichkeit, Bereiche unseres Rasters auf nahezu visuell repräsentative Weise zu benennen. In seiner einfachsten Form würden wir nur verwenden Gitter um unsere Vorlagenbereiche zu beschreiben und sonst nichts:
.grid-1 display: grid; Raster: "Kopfzeile Kopfzeile" "Hauptseitenleiste" "Fußzeile Fußzeile Fußzeile";
Dann geben wir an, welcher Bereich jedes Rasterelement wie folgt ausfüllt:
.item-1 Grid-Bereich: Kopfzeile;
Wenn Sie sich an unser ursprüngliches Vorlagenbereichstutorial erinnern, hatten wir einige weitere Details, um uns Spalten- und Zeilenabmessungen zu geben:
.grid-1 display: grid; Rastervorlagen-Spalten: Wiederholung (3, 1fr); Raster-Vorlage-Zeilen: 80px 180px 80px; Raster-Vorlagenbereiche: "Kopfzeile Kopfzeile" "Hauptseitenleiste" "Fußzeile Fußzeile Fußzeile";
Das können wir auch wie folgt machen:
.grid-1 display: grid; grid: "header header header" 80px "Hauptseitenleiste" 180px "Fußzeile Fußzeile Fußzeile" 80px / 1fr 1fr 1fr;
Wir fügen die Spaltenbreiten nach dem Schrägstrich (der wiederholen() Funktion funktioniert in diesem Fall nicht, aber ich weiß nicht warum). Nach den Bereichsdeklarationen fügen wir die Zeilenhöhen inline hinzu. Das ist, was wir am Ende mit:
Dieses Tutorial sollte Ihnen ein Verständnis dafür vermittelt haben, wie die Gitter Abkürzungseigenschaft funktioniert. Spielen Sie herum, sehen Sie, welche anderen Aspekte des CSS-Grid-Moduls Sie damit verwenden können, und lassen Sie uns wissen, wie viel Zeit Sie sparen!
Accentsconagua