Share
Was Sie erstellen werdenIn diesem Lernprogramm werde ich die Grundlagen des CSS-Rasterlayouts mit Beispielszenarien behandeln. CSS Grid wird derzeit von fast allen modernen Browsern unterstützt und kann in der Produktion verwendet werden. Im Gegensatz zu anderen Layoutmethoden wie der Flexbox bietet das Rasterlayout zwei Freiheitsgrade, was es so vielseitig macht, dass die Positionierung der Elemente ein Kinderspiel ist.
Um das CSS-Grid-Layout zu verwenden, sollten Ihre HTML-Elemente eine bestimmte Struktur haben.
Sie müssen die Elemente, die Sie steuern möchten, in einen übergeordneten Container DIV einschließen.
1234
Lassen Sie uns ein paar Stylings für unsere DIVs hinzufügen, damit wir sie leicht unterscheiden können.
Stellen Sie auch das ein Anzeige: Raster in deiner Verpackung DIV, damit wir das Rasterlayout verwenden können.
.Wrapper> div Hintergrundfarbe: Orange; Rand: 1px schwarzer Körper; .wrapper> div: nth-child (ungerade) Hintergrundfarbe: indianred; .wrapper display: grid
Von diesem Zeitpunkt an wird das gesamte Styling in die Verpackung DIV. Wenn wir jemals die untergeordneten DIVs steuern möchten, fügen wir gitterspezifische Stilregeln für die jeweiligen untergeordneten DIV hinzu.
Die ersten Dinge, die wir über das Rasterlayout lernen müssen, sind Raster-Vorlage-Spalten und Raster-Vorlage-Zeilen. Diese beiden Regeln steuern im Wesentlichen die Form Ihres Gitters.
Der Wert dieser Regeln kann eine Länge, ein Prozentsatz oder ein Bruchteil des freien Platzes im Raster sein. Sie können auch einen beliebigen Wert auf einstellen Auto, was den verbleibenden Raum ausfüllt.
Nachfolgend einige Beispiele.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: 100px 100px 100px
.Wrapper Anzeige: Gitter; Gitternetzvorlagen-Spalten: 100px auto 100px
.Wrapper Anzeige: Gitter; Raster-Template-Spalten: 1fr 1fr 1fr 1fr;
Beginnen wir mit dem Aufbau eines echten Gitters, in dem wir sowohl Spalten als auch Reihen steuern können.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: 1fr 1fr; Raster-Vorlage-Zeilen: 50px 50px;
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: 100px 20px 250px; Raster-Vorlage-Zeilen: 150px 40px;
Hier habe ich nur zwei weitere untergeordnete DIVs zum HTML für das gleiche CSS hinzugefügt.
Wenn Sie ein sich wiederholendes Muster für haben Raster-Vorlage,Sie können einfach wiederholen und angeben, wie oft das gleiche Muster wiederholt werden soll.
Angenommen, Sie haben 12 Elemente und möchten diese horizontal gleich breit auslegen. Du könntest es wiederholen 1fr 12 mal drinnen Raster-Vorlage-Spalten, das ist nicht effektiv. Stattdessen können Sie verwenden wiederholen (12, 1fr).
.Wrapper Anzeige: Gitter; Rastervorlagenspalten: wiederholen (12, 1fr)
Ebenso können Sie ein Muster wiederholen.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: Wiederholung (4, 1fr 5fr 10fr);
Mit dieser Regel können Sie die Breite und Höhe von Gitterzellen festlegen.
Wenn Sie diese Regel nicht festlegen, werden Ihre Rasterzeilen und -spalten mit dem Inhalt erweitert.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: Wiederholung (4, 1fr); Raster-Auto-Zeilen: 100px;
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: Wiederholung (4, 1fr); Raster-Auto-Zeilen: 20px 80px;
Eine schöne Funktion, die Sie verwenden können Raster-Auto Regel ist die Minimal Maximal Funktion.
Sie legen einfach die minimale Größe als ersten Parameter und das Maximum als zweiten Parameter fest. Wenn du eingestellt hast Auto Für den zweiten Parameter erhalten Sie eine responsive Zellengröße.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: Wiederholung (4, 1fr); Raster-Auto-Zeilen: Minmax (50px, Auto)
Unten sehen Sie zwei verschiedene DIV-Inhalte mit den gleichen CSS-Regeln.
Wie der Name schon sagt, schafft diese Regel eine Lücke zwischen den Gitterzellen.
Wenn du benutzt Gitterlücke: 5px, Sie erhalten eine 5px-Lücke zwischen jeder Zelle. Alternativ können Sie nur die Zeilen- oder Spaltenlücken mit festlegen Rasterzeilenlücke: 5px und Gitterspaltenlücke: 5px beziehungsweise.
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: Wiederholung (4, 1fr); Raster-Auto-Zeilen: Minmax (50px, Auto); Gitterspalt: 5px;
Bisher haben wir uns nur auf die Form des Gitters und der Elemente konzentriert, die gerade in das Gitter eingeflossen sind. Jetzt lernen wir, jeden Gegenstand einzeln zu steuern.
Um die Elemente zu positionieren, verwenden wir Rasterlinien als Referenz. Unten sehen Sie die Zeilen- und Spaltenlinien in Schwarz und Orange für ein 2x4-Gitter.
Wir werden die verwenden Rasterspalte und Rasterzeile Regeln mit Zeilennummern, um die Elemente zu positionieren.
Zum Beispiel, wenn wir einstellen Rastersäule: 1/3 Für das erste untergeordnete div werden die ersten beiden Zellen im Raster verwendet.
Betrachten Sie das HTML und CSS unten:
12345678
.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: Wiederholung (4, 1fr); Raster-Auto-Zeilen: 100px; Gitterspalt: 5px;
Wir haben vier gleich große Spalten und acht Elemente in der Verpackung DIV.
.div1 Gitterspalte: 1/3;
.div1 Gitterspalte: 1/3; Rasterreihe: 1/3;
Sie können diese beiden Regeln auch zu einer einzigen Regel kombinieren, grid-area: rowStart / columnStart / rowEnd / columnEnd.
.div1 Gitterfläche: 2/2/3/4;
Wie im obigen Beispiel veranschaulicht, sind Elemente nicht an die HTML-Struktur gebunden. Beachten Sie, wie das erste Element mit dem neu positioniert wird Netzfläche Regel.
Sie können jedes untergeordnete Element benennen und diese Namen verwenden, um Ihr Raster zu erstellen. Das ist wirklich mächtig und macht das Layout intuitiver.
Daher definieren wir eine DIV für jedes Element, das wir in unser Grid-System einfügen möchten.
Ich plane einen Header, leftColumn, rightColumn, middleTop, middleBottom und eine Fußzeile.
Also brauche ich in meinem HTML-Code so viele Child-DIVs. Die Klassennamen können alles sein.
HeaderLeftColRightColMidTopmidBottomFußzeile
Dann setze ich in meinem CSS das Netzfläche Namen. Diese Namen können alles sein. Sie sollen nicht mit den Klassennamen übereinstimmen.
.Kopfzeile Rasterfläche: Kopfzeile; Hintergrundfarbe: LightSeaGreen; .leftCol grid-area: leftCol; Hintergrundfarbe: Orange; .rightCol grid-area: rightCol; Hintergrundfarbe: hellblau; .midTop grid-area: midTop; Hintergrundfarbe: hellgrau; .midBottom grid-area: midBottom; Hintergrundfarbe: pink; .footer grid-area: footer; Hintergrundfarbe: hellgrün;
Dann in meinem Verpackung DIV, ich benutze die Raster-Vorlagenbereiche Regel, diese Elemente durch Bezugnahme auf ihre definierten Namen auszulegen.
Beachten Sie, dass ich ein 4x4-Gitter habe.
.Wrapper Anzeige: Gitter; Gitter-Template-Spalten: 1fr 4fr 4fr 1fr; Raster-Vorlage-Zeilen: 50px 100px 100px 30px; grid-template-areas: "header header header" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" "footer footer footer footer"; Gitterspalt: 5px;
Wenn ich zum Beispiel möchte, dass die Fußzeile nur zwei Spalten enthält und zentriert wird, dann ersetze ich einfach den ersten und den letzten Auftritt von Fußzeile mit einem Punkt (.) im Raster-Vorlagenbereiche.
.Wrapper Anzeige: Gitter; Gitter-Template-Spalten: 1fr 4fr 4fr 1fr; Raster-Vorlage-Zeilen: 50px 100px 100px 30px; grid-template-areas: "header header header" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" ". footer footer."; Gitterspalt: 5px;
CSS Grid hat viele Regeln und ich habe nur die nützlichsten in diesem Tutorial behandelt. Sie können weiterhin in MDN-Web-Docs oder andere Quellen nach einer vollständigen Liste der Rastereigenschaften und -funktionen suchen.
Accentsconagua