選択リスト項目をCSSグリッドと一緒にグループ化します

選択したリスト項目をCSSグリッドを介して巧みにグループ化して、ユーザーエクスペリエンスを向上させます！ 選択されたアイテムグループは、選択されたアイテムと選択されていないアイテムをすばやく区別するのに役立つ一般的な設計戦略です。たとえば、To Doリストでは、完成したアイテムが上向きに移動し、ユーザーが残りのタスクに集中しやすくなります。

同様のグループUIを設計します。選択したアイテムの単純な再配置とは異なり、CSSグリッドを使用して、選択したアイテムを水平方向にレイアウトして、選択されていないアイテムと選択されていないアイテムをさらに区別します。

2つの方法を検討します。 1つは、選択したアイテムがグリッドコンテナの境界を超えない状況に適しているため、安定したレイアウトを使用します。 auto-fill span2つのメソッドのHTMLコードは同じです：

コードは、順序付けされていないリスト（

<li>
?
Bento
<li>
?
Dangos

）で構成されています。 CSSグリッド属性がプロジェクトのレイアウトを決定するため、要素を追加する必要はありません。暗黙的な

要素を使用してラップを使用して、追加のラッピングを避けますが、通常、明示的なタグは支援技術によってよりサポートされています。 <ul></ul> <label></label>

メソッド1：

auto-fillを使用します リスト項目を含む

要素は、グリッドコンテナにするために

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

に設定されています。グリッドの行と列の間に14pxと10pxのギャップを設定します。グリッドコンテンツは、中心に水平に整列されています。

プロパティは、グリッド内の列のサイズを指定します。初期状態では、すべてのアイテムが単一の列にあります。アイテムが選択されると、それらは最初の行に移動し、選択した各アイテムが列を占有します。キーは値にあります。 <ul></ul> display: gridgrid-template-columns値は、auto-fill関数の繰り返しの数に使用されます。列が繰り返され、各列のトラックサイズが

（例で40px）に与えられ、グリッドコンテナの境界に適応できるようにします。

リスト項目の初期ステータスが単一の列であることを確認するには：auto-fill repeat() repeat()アイテムが選択されている場合（

要素が選択されています）、

セレクターを使用してください：

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

これにより、選択したアイテムがリストの上部にグループ化され、水平に配置されます。 <input> :has(:checked)

メソッド2：キーワード

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

グリッドアイテムの整列を支援します。更新

スタイル：grid-template-columns <ul></ul>

各アイテムは最初の列に配置されますが、現在は6つの列トラックにも及びます（6つのアイテムがあるため）。これにより、グリッドに複数の列が表示されると、選択したアイテムが選択されたアイテムの下にある後に選択されていないアイテムが選択されていないことが保証されます。

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

宣言は、アイテムを中心に保ちます。

justify-items: center <li>選択したアイテムの幅が増加し、アイテムが選択されたアイテムが選択されたときに、選択したUIのレイアウトを表示します。

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

Orderを選択justify-items: center

選択されていないアイテムの順序は、ソース順序と同じままです。ユーザーの選択と一致するために画面の順序が必要な場合、アイテムが選択されたときに増分注文値が動的に割り当てられます。

<li>
?
Bento
<li>
?
Dangos

概要

CSSグリッドは、多くの構成なしで両方の方法を非常に柔軟にします。 auto-fillを使用してどちらの軸（行または列）にアイテムを配置することにより、選択したアイテムがコンテナにオーバーフローしない限り、選択したアイテムを同じ容器内の選択されていないアイテムのレイアウトに影響を与えることなく、選択したアイテムをグリッドコンテナに簡単にグループ化できます。

アイテムがコンテナにオーバーフローしている場合、

メソッドを使用すると、特定の軸上の選択されたアイテムの長さに関係なく、レイアウトを維持するのに役立ちます。 UIのいくつかの設計的な代替品には、選択したアイテムをリストの最後までグループ化するか、水平構造と垂直構造を交換することが含まれます。 span

以上が選択リスト項目をCSSグリッドと一緒にグループ化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。