GRASSER IMMISSIEMENT LES éléments de liste sélectionnés via la grille CSS pour améliorer l'expérience utilisateur! Le regroupement d'éléments sélectionné est une stratégie de conception courante qui aide les utilisateurs à distinguer rapidement les éléments sélectionnés et non sélectionnés. Par exemple, dans la liste des taches, les éléments terminés montent vers le haut, ce qui facilite la concentration sur les taches restantes.

Nous concevons une interface utilisateur de regroupement similaire. Contrairement au réarrangement simple des éléments sélectionnés, nous utiliserons la grille CSS pour disposer horizontalement les éléments sélectionnés pour distinguer davantage les éléments sélectionnés et non sélectionnés.

Nous explorerons deux méthodes. On utilise auto-fill, qui convient aux situations où l'élément sélectionné ne dépasse pas la limite du conteneur de la grille, assurant une disposition stable; span

<li>
?
Bento
<li>
?
Dangos

). Nous n'avons pas besoin d'envelopper les éléments supplémentaires, car l'attribut GRID CSS déterminera la disposition du projet. Notez que j'utilise des éléments implicites <ul></ul> pour envelopper, en évitant un emballage supplémentaire, mais les balises explicites sont généralement plus prises en charge par les technologies d'assistance. <label></label>

Méthode 1: Utilisez auto-fill

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

contenant l'élément de liste est défini sur <ul></ul> pour en faire un conteneur de grille. Il définit un espace de 14px et 10px entre les lignes de grille et les colonnes. Le contenu de la grille est aligné horizontalement sur le centre. La propriété display: grid spécifie la taille des colonnes dans la grille. Dans l'état initial, tous les éléments se trouvent dans une seule colonne. Une fois les éléments sélectionnés, ils passeront à la première ligne, chaque élément sélectionné occupant une colonne. La clé réside dans la valeur. grid-template-columns La valeur auto-fill

. Il garantit que les colonnes sont répétées, chaque colonne a la taille de piste donnée dans auto-fill (40px dans l'exemple) et peut s'adapter aux limites du récipient de grille. repeat() repeat() pour s'assurer que l'état initial de l'élément de liste est une seule colonne:

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

: <input> :has(:checked)

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;
    /* ...其他樣式... */
  }
  /* ...其他樣式... */
}

span Cette méthode ne nécessite pas l'attribut

est le suivant: grid-template-columns <ul></ul>

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

mis à jour: justify-items: center <li>

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

justify-items: center

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

L'ordre des éléments sélectionnés et non sélectionnés restera le même que l'ordre source. Si l'ordre d'écran est nécessaire pour correspondre à la sélection de l'utilisateur, la valeur de commande incrémentée est attribuée dynamiquement lorsque l'élément est sélectionné.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!