Implementierung des gemeinsamen Grid-Layouts

Keine Lücken auf beiden Seiten, Lücken zwischen jeder Spalte

Breite: 100 %;  
Anzeige: Raster;  
Raster-Vorlagenspalten: Wiederholung (4,1fr);  
Elemente ausrichten: strecken;  
Gitterabstand: 1px;

Eigenschafteneinführung: Die Eigenschaft justify-items legt die horizontale Position des Zelleninhalts (links, mittig und rechts) fest, und align-items legt die vertikale Position des Zelleninhalts (oben, mittig und unten) fest.

• Start: Richtet die Startkante der Zelle aus.
• Ende: Richtet an der Endkante der Zelle aus.
• Mitte: Die Zelle wird innen zentriert.
• Strecken: Strecken, um die gesamte Breite der Zelle auszufüllen (Standardwert).

Eigenschafteneinführung: Nachdem der Container das Rasterlayout angegeben hat, muss es in Zeilen und Spalten unterteilt werden. grid-template-columns definiert die Breite jeder Spalte und grid-template-rows definiert die Höhe jeder Zeile. repeat(4,1fr) bedeutet Wiederholung. Der erste Parameter gibt die Anzahl der Male an. Hier gibt es 4 Spalten, was 4 Mal bedeutet. 1rf steht für das Portionskonzept. repeat(4,1fr) bedeutet, dass es in 4 gleichmäßige Portionen aufgeteilt wird.

Die Wirkung ist wie folgt:

Die Abstände zwischen Zeilen und Spalten sind gleich und die vertikale Richtung hat Vorrang.

.swiper-slide-inner {  
    Breite: 100 %;  
    Anzeige: Raster;  
    /*Vertikale Anordnung zuerst*/  
    Raster-Auto-Flow: Spalte;  
    /* Auf drei Spalten aufteilen, Durchschnittspunktzahl*/  
    /*Rastervorlagenspalten: Wiederholung (3, 1fr);*/  
    Rastervorlagenspalten: 1fr 1fr 1fr;  
    /* In 2 Reihen aufteilen, gleichmäßig verteilen*/  
    /*Rastervorlage-Zeilen: Wiederholung (2, 1fr);*/  
    Rastervorlagenzeilen: 1fr 1fr;  
    Rasterzeilenabstand: 10px;  
    Rasterspaltenabstand: 10px;  
    .Kartenelement {  
        Anzeige: Flex;  
        Flex-Wrap: Umwickeln;  
        Breite: 230px;  
        Höhe: 230px;
    }
}

Einführung in die Eigenschaften: Nach dem Aufteilen des Rasters werden die Unterelemente des Containers automatisch der Reihe nach in jedes Raster eingefügt. Die Standardplatzierungsreihenfolge ist „Zuerst Zeilen, dann Spalten“, d. h., füllen Sie zuerst die erste Zeile aus und beginnen Sie dann mit der Platzierung der zweiten Zeile. Dies ist die Reihenfolge der Zahlen in der folgenden Abbildung. Diese Reihenfolge wird durch grid-auto-flow bestimmt und der Standardwert ist row , was „zuerst Zeilen, dann Spalten“ bedeutet. Sie können es auch auf column setzen, was bedeutet „zuerst Spalten, dann Zeilen“.

Die Wirkung ist wie folgt:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.