通過CSS Grid巧妙分組顯示選中列表項(xiàng)，提升用戶體驗(yàn)！ 選中項(xiàng)分組是常見的設(shè)計(jì)策略，幫助用戶快速區(qū)分選中和未選中項(xiàng)。例如，在待辦事項(xiàng)列表中，已完成項(xiàng)會向上移動，方便用戶關(guān)注剩余任務(wù)。

我們將設(shè)計(jì)一個類似的分組UI。不同于簡單的重新排列選中項(xiàng)，我們將使用CSS Grid水平布局選中項(xiàng)，進(jìn)一步區(qū)分選中和未選中項(xiàng)。

我們將探討兩種方法。一種使用auto-fill，適用于選中項(xiàng)未超出網(wǎng)格容器邊界的情況，確保布局穩(wěn)定；另一種使用CSS Grid的span關(guān)鍵字，提供更大的靈活性。

兩種方法的HTML代碼相同：

<li>
?
Bento
<li>
?
Dangos

代碼由一個無序列表(<ul></ul>)構(gòu)成。我們無需額外包裝元素，因?yàn)镃SS Grid屬性將決定項(xiàng)目布局。注意，我使用隱式<label></label>元素包裹，避免額外包裝，但顯式標(biāo)簽通常更受輔助技術(shù)的支持。

方法一：使用auto-fill

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

包含列表項(xiàng)的<ul></ul>元素設(shè)置為display: grid，使其成為網(wǎng)格容器。它在網(wǎng)格行和列之間設(shè)置了14px和10px的間隙。網(wǎng)格內(nèi)容水平對齊到中心。grid-template-columns屬性指定網(wǎng)格中列的尺寸。初始狀態(tài)下，所有項(xiàng)目都在單列中。選中項(xiàng)目后，它們將移動到第一行，每個選中項(xiàng)目占據(jù)一列。關(guān)鍵在于auto-fill值。

auto-fill值用于repeat()函數(shù)的重復(fù)次數(shù)。它確保列重復(fù)，每列的軌道大小為repeat()中給定的尺寸（示例中為40px），并能適應(yīng)網(wǎng)格容器的邊界。

為了確保列表項(xiàng)初始狀態(tài)為單列：

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

選中項(xiàng)目（<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;
    /* ...其他樣式... */
  }
  /* ...其他樣式... */
}

這使得選中項(xiàng)分組到列表頂部并水平排列。

方法二：使用span關(guān)鍵字

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

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

justify-items: center有助于對齊網(wǎng)格項(xiàng)目。更新的<li>樣式：

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

每個項(xiàng)目都放置在第一列，但現(xiàn)在它們也跨越六個列軌道（因?yàn)橛辛鶄€項(xiàng)目）。這確保了當(dāng)網(wǎng)格中出現(xiàn)多列時，選中項(xiàng)目后的未選中項(xiàng)目仍保持單列，位于選中項(xiàng)目下方——未選中項(xiàng)目現(xiàn)在跨越多個列軌道。justify-items: center聲明將使項(xiàng)目保持居中對齊。

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

選中項(xiàng)目的寬度已增加，以便在選中項(xiàng)目溢出容器時查看選擇UI的布局。

選擇順序

選中和未選中項(xiàng)目的順序?qū)⒈３峙c源順序相同。如果需要屏幕順序與用戶選擇匹配，則在選中項(xiàng)目時動態(tài)分配遞增的順序值。

<li>
?
Bento
<li>
?
Dangos

總結(jié)

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

如果項(xiàng)目溢出容器，使用span方法有助于保持布局，而不管選中項(xiàng)目在給定軸上的長度如何。UI的一些設(shè)計(jì)替代方案包括將選中項(xiàng)目分組到列表的末尾，或交換水平和垂直結(jié)構(gòu)。

以上是將選擇列表項(xiàng)目與CSS網(wǎng)格一起分組的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！