将选择列表项目与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中文网其他相关文章！