將選擇列表項目與CSS網格一起分組

通過CSS Grid巧妙分組顯示選中列表項，提升用戶體驗！ 選中項分組是常見的設計策略，幫助用戶快速區分選中和未選中項。例如，在待辦事項列表中，已完成項會向上移動，方便用戶關注剩餘任務。

我們將設計一個類似的分組UI。不同於簡單的重新排列選中項，我們將使用CSS Grid水平佈局選中項，進一步區分選中和未選中項。

我們將探討兩種方法。一種使用auto-fill，適用於選中項未超出網格容器邊界的情況，確保佈局穩定；另一種使用CSS Grid的span關鍵字，提供更大的靈活性。

兩種方法的HTML代碼相同：

<li>
?
Bento
<li>
?
Dangos

代碼由一個無序列表(<ul></ul>)構成。我們無需額外包裝元素，因為CSS Grid屬性將決定項目佈局。注意，我使用隱式<label></label>元素包裹，避免額外包裝，但顯式標籤通常更受輔助技術的支持。

方法一：使用auto-fill

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

包含列表項的<ul></ul>元素設置為display: grid，使其成為網格容器。它在網格行和列之間設置了14px和10px的間隙。網格內容水平對齊到中心。 grid-template-columns屬性指定網格中列的尺寸。初始狀態下，所有項目都在單列中。選中項目後，它們將移動到第一行，每個選中項目佔據一列。關鍵在於auto-fill值。

auto-fill值用於repeat()函數的重複次數。它確保列重複，每列的軌道大小為repeat()中給定的尺寸（示例中為40px），並能適應網格容器的邊界。

為了確保列表項初始狀態為單列：

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關鍵字

此方法無需grid-template-columns屬性。新的<ul></ul>樣式如下：

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

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

選中項目的寬度已增加，以便在選中項目溢出容器時查看選擇UI的佈局。

選擇順序

選中和未選中項目的順序將保持與源順序相同。如果需要屏幕順序與用戶選擇匹配，則在選中項目時動態分配遞增的順序值。

<li>
?
Bento
<li>
?
Dangos

總結

CSS Grid使得兩種方法都非常靈活，無需大量配置。通過使用auto-fill在任一軸（行或列）上放置項目，可以輕鬆地將選中項目分組到網格容器中，而不會影響同一容器中未選中項目的佈局，只要選中項目不溢出容器即可。

如果項目溢出容器，使用span方法有助於保持佈局，而不管選中項目在給定軸上的長度如何。 UI的一些設計替代方案包括將選中項目分組到列表的末尾，或交換水平和垂直結構。

以上是將選擇列表項目與CSS網格一起分組的詳細內容。更多資訊請關注PHP中文網其他相關文章！