如何在网格显示中为每行添加支撑线 [英] How to add supporting line to each row in grid display

问题描述

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

数据-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-row和grid-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>

这篇关于如何在网格显示中为每行添加支撑线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！