如何在网格显示中为每行添加支撑线

2022-04-02 00:00:00 css css-grid

我正在创建一个元素,它显示一组任意的图标,就像字符串上的珠子一样。到目前为止,我已经用网格显示了图标的排列,如下所示(出于演示目的,将图标替换为正方形):

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
body {
  width: 90%;
  max-width: 300px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica,  sans-serif;
}

.container > div {
  border-radius: 5px;
  background-color: rgb(36,33,33);
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, auto));
  gap: 20px;
  grid-auto-rows: minmax(30px, auto);
}
    <h1>Simple grid example</h1>

    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

但我不知道如何在每一行上为图标创建一条线。参考图片:

灰色线条应该在黑色方块后面。想法:

  1. 将div动态添加到看起来像行的container,然后设置它们的grid-rowgrid-col属性以与块重叠。

  2. 不是只将黑色正方形作为container的元素,而是使用包含一个黑色正方形和一个水平线段的div,以便每个黑色正方形都带有一小段线。然后检测每行的边框,并移动线条或其宽度的一半,使其不显示在边上。

这两个解决方案似乎都很复杂,所以在我进入兔子洞之前,我想问一下是否有更简单的方法,即使是不需要JS的方法。


解决方案

我认为使用pseudo-elements会更好,因为不需要向DOM添加额外的元素。

  1. 为所有单元格创建具有所需属性的pseudo-element
  2. 向左移动pseudo-element
  3. 添加最后添加overflow: hidden;.container为隐藏 不必要的pseudo-elements
.container div::after {
  content: '';
  width: calc(var(--cell) + var(--column-gap)); /* 30px + 20px */
  height: var(--line-height); /* 3px */
  position: absolute;
  top: 50%;
  left: -50%;
  background-color: gray;
  transform: translate(-50%, -50%);
  z-index: -1;
}
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --cell: 30px;
  --column-gap: 20px;
  --line-height: 3px;
}

body {
  width: 90%;
  /* max-width: 300px; */
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container {
  display: flex;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell), auto));
  gap: var(--column-gap);
  grid-auto-rows: minmax(var(--cell), auto);
  overflow: hidden;  /* hide left side */
}

.container>div {
  position: relative;
  border-radius: 5px;
  background-color: rgb(36, 33, 33);
}

.container div::after {
  content: '';
  width: calc(var(--cell) + var(--column-gap)); /* 30px + 20px */
  height: var(--line-height); /* 3px */
  position: absolute;
  top: 50%;
  left: -50%;
  background-color: gray;
  transform: translate(-50%, -50%);
  z-index: -1;
}
<h1>Simple grid example</h1>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

相关文章