Einfaches Gitter mit abwechselnden Reihen

Einführung

Dies ist eine einfache Demonstration, wie Sie einige einfache Raster mit abwechselnden Reihen erstellen können. In diesem Beispiel haben Sie eine Zeile mit drei Elementen und eine Zeile mit zwei.
Dies ist eine 100 %ige CSS-Lösung und läuft darauf hinaus, @property für den Span-Wert der Eigenschaft „grid-columns“ zu verwenden.

Wie es funktioniert

Nun, es ist ganz einfach. Sie müssen wissen, wie viele verschiedene Zeilen es geben wird und wie viele Elemente diese verschiedenen Zeilen insgesamt enthalten.

In meinem Beispiel wäre das:

• 2 verschiedene Reihen
• 3 Artikel 2 Artikel = 5 Artikel

Das bedeutet, dass Sie beim Ausführen des :nth-child()-Selektors diese Gesamtzahl verwenden müssen:

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --col-span: 4;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --col-span: 6;
}

Die benutzerdefinierte Eigenschaft col-span wird wie folgt verwendet:

.item {
    ...
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
    ...
}

Und das ist so ziemlich alles. Es ist super einfach, nichts Großes, aber dennoch nützlich für alle.

Eine Designer-freundlichere, aber komplexere Lösung

Für eine Designer-freundlichere Lösung habe ich mir überlegt, die tatsächliche Anzahl der Elemente anzugeben, anstatt die Spanne zu ändern, denn wenn man die Anzahl der Spalten in einem Raster ändert, aber vergisst, die Spannen anzupassen, erhält man einen unerwünschten Effekt. Aus diesem Grund habe ich eine weitere benutzerdefinierte Eigenschaft hinzugefügt und diese stattdessen geändert.

Das Unglücklichste daran ist, dass der n-te-Kind-Selektor unabhängig von der Lösung, für die Sie sich entscheiden, manuell oder über JavaScript geändert werden muss, wenn Sie eine vollständig dynamische Lösung wünschen. (Sie können auch SASS/SCSS verwenden, was natürlich auch eine gute Möglichkeit ist)

Die neu hinzugefügte Eigenschaft sieht so aus:

@property --row-items {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

Für die Elemente können Sie den Wert der Eigenschaft --row-items
ändern

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --row-items: 3;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --row-items: 2;
}

Und die Span-Spalten werden jetzt direkt für die .item-Klasse berechnet, anstatt x auszuwählen.

.item {
    --span-cols: calc(var(--grid-cols) / var(--row-items));
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
}

Zu Referenzzwecken werden die benutzerdefinierten Eigenschaften für Spalten und Zeilen wie folgt deklariert:

@property --grid-cols {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --grid-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

Abschluss

Ich hoffe, dies hilft Ihnen zu verstehen, wie diese Art von Raster funktioniert.
Wenn Sie Fehler finden oder Feedback für mich haben, schreiben Sie einen Kommentar zu diesem Beitrag!

Danke und ich wünsche dir ein schönes Wochenende,
Kuraikari

Originalstift

Der Stift mit der items-Eigenschaft

Das obige ist der detaillierte Inhalt vonEinfaches Gitter mit abwechselnden Reihen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!