Gruppierung der Auswahllistenelemente zusammen mit CSS Grid

gruppieren Sie die ausgewählten Listenelemente geschickt über CSS Grid, um die Benutzererfahrung zu verbessern! Die ausgewählte Elementgruppierung ist eine gemeinsame Designstrategie, mit der Benutzer ausgewählte und nicht ausgewählte Elemente schnell unterscheiden können. In der To-Do-Liste werden beispielsweise die abgeschlossenen Elemente nach oben bewegen, sodass Benutzer sich auf die verbleibenden Aufgaben konzentrieren können.

Wir werden eine ähnliche Gruppierungs -Benutzeroberfläche entwerfen. Im Gegensatz zur einfachen Umlagerung ausgewählter Elemente verwenden wir das CSS -Netz, um die ausgewählten Elemente horizontal zu lagern, um zwischen ausgewählten und nicht ausgewählten Elementen weiter zu unterscheiden.

Wir werden zwei Methoden untersuchen. Einer verwendet auto-fill, was für Situationen geeignet ist, in denen das ausgewählte Element die Grenze des Gitterbehälters nicht überschreitet, was ein stabiles Layout sicherstellt. span

Der HTML -Code der beiden Methoden ist gleich:

Der Code

<li>
?
Bento
<li>
?
Dangos

besteht aus einer ungeordneten Liste (

). Wir müssen die Elemente nicht zusätzlich einwickeln, da das CSS -Netzattribut das Projektlayout bestimmt. Beachten Sie, dass ich implizite <ul></ul> Elemente zum Wickeln verwende und zusätzliche Verpackungen vermeiden kann. Explizite Tags werden jedoch normalerweise stärker von assistiven Technologien unterstützt. <label></label>

Methode 1: Verwenden Sie auto-fill

ul {
  width: 250px;
  display: grid;
  gap: 14px 10px;
  grid-template-columns: repeat(auto-fill, 40px);
  justify-content: center;
  /* ...其他样式... */
}

Das Element

, das das Listenelement enthält, wird auf <ul></ul> gesetzt, um es zu einem Gitterbehälter zu machen. Es legt eine Lücke von 14px und 10px zwischen Gitterzeilen und Spalten. Der Netzinhalt ist horizontal auf das Zentrum ausgerichtet. Die Eigenschaft display: grid gibt die Größe der Spalten im Raster an. Im Anfangszustand befinden sich alle Elemente in einer einzigen Spalte. Sobald die Elemente ausgewählt sind, wechseln sie in die erste Zeile, wobei jedes ausgewählte Element eine Spalte besetzt. Der Schlüssel liegt im Wert. grid-template-columns Der Wert auto-fill

wird für die Anzahl der Wiederholungen der

-Funktion verwendet. Es stellt sicher, dass die Spalten wiederholt werden. Jede Spalte hat die in auto-fill (40px) angegebene Spurgröße und kann sich an die Grenzen des Gitterbehälters anpassen. repeat() repeat() Um sicherzustellen, dass der anfängliche Status des Listelements eine einzelne Spalte ist:

Wenn das Element ausgewählt ist (das Element

li {
  width: inherit;
  grid-column: 1;
  /* 等同于：grid-column-start: 1; grid-column-end: auto; */
  /* ...其他样式... */
}

ist ausgewählt), verwenden Sie den

-Alektor: <input> :has(:checked)

Dies führt dazu, dass die ausgewählten Elemente ganz oben auf der Liste gruppiert und horizontal angeordnet werden.

li {
  width: inherit;
  grid-column: 1;
  /* ...其他样式... */
  &:has(:checked) {
    grid-area: 1;
    /* 等同于：grid-row-start: 1; grid-column-start: auto; grid-row-end: auto; grid-column-end: auto; */
    width: 40px;
    /* ...其他样式... */
  }
  /* ...其他样式... */
}

Methode 2: Verwenden Sie das Schlüsselwort

span Diese Methode erfordert nicht das Attribut

. Der neue

-Stil lautet wie folgt: grid-template-columns <ul></ul>

ul {
  width: 250px;
  display: grid;
  gap: 14px 10px;
  justify-content: center;
  justify-items: center;
  /* ...其他样式... */
}

hilft bei der Ausrichtung der Rasterelemente. Aktualisiert

Stil: justify-items: center <li>

Jedes Element wird in der ersten Spalte platziert, aber jetzt umfassen sie auch sechs Spaltenspuren (weil es sechs Elemente gibt). Dies stellt sicher, dass wenn mehrere Spalten im Raster angezeigt werden, nicht ausgewählte Elemente nach dem ausgewählten Element unterhalb des ausgewählten Elements einzeln bleiben - die nicht ausgewählten Elemente umfassen jetzt mehrere Spaltenspuren.

li {
  width: inherit;
  grid-column: 1 / span 6;
  /* 等同于：grid-column-start: 1; grid-column-end: span 6; */
  /* ...其他样式... */
}

Die Erklärung hält die Gegenstände zentriert.

justify-items: center

Die Breite des ausgewählten Elements wurde erhöht, um das Layout der ausgewählten Benutzeroberfläche anzuzeigen, wenn der Artikel überläuft, den der Container ausgewählt ist.

li {
  width: inherit;
  grid-column: 1 / span 6;
  /* ...其他样式... */
  &:has(:checked) {
    grid-area: 1;
    width: 120px;
    /* ...其他样式... */
  }
  /* ...其他样式... */
}

Wählen Sie die Bestellung

aus

Die Reihenfolge ausgewählter und nicht ausgewählter Elemente bleibt mit der Quellreihenfolge übereinstimmend. Wenn die Bildschirmreihenfolge für die Auswahl der Benutzer übereinstimmt, wird der inkrementierte Bestellwert dynamisch zugewiesen, wenn das Element ausgewählt ist.

<li>
?
Bento
<li>
?
Dangos

Zusammenfassung

CSS -Gitter macht beide Methoden ohne viel Konfiguration sehr flexibel. Durch das Platzieren von Elementen entweder auf Achse (Zeile oder Spalte) mit auto-fill können Sie ausgewählte Elemente problemlos in Gitterbehälter gruppieren, ohne das Layout nicht ausgewählter Elemente im selben Container zu beeinflussen, solange die ausgewählten Elemente den Container nicht überfüllen.

Wenn das Element den Container überläuft, hilft die Verwendung der span -Methode, das Layout unabhängig von der Länge des ausgewählten Elements auf der angegebenen Achse beizubehalten. Einige Designalternativen zur Benutzeroberfläche umfassen die Gruppierung ausgewählter Elemente bis zum Ende einer Liste oder das Austausch horizontaler und vertikaler Strukturen.

Das obige ist der detaillierte Inhalt vonGruppierung der Auswahllistenelemente zusammen mit CSS Grid. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!