如何在网格显示中为每行添加支撑线
我正在创建一个元素,它显示一组任意的图标,就像字符串上的珠子一样。到目前为止,我已经用网格显示了图标的排列,如下所示(出于演示目的,将图标替换为正方形):
数据-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>
但我不知道如何在每一行上为图标创建一条线。参考图片:
灰色线条应该在黑色方块后面。想法:
将div动态添加到看起来像行的
container
,然后设置它们的grid-row
和grid-col
属性以与块重叠。不是只将黑色正方形作为
container
的元素,而是使用包含一个黑色正方形和一个水平线段的div,以便每个黑色正方形都带有一小段线。然后检测每行的边框,并移动线条或其宽度的一半,使其不显示在边上。
这两个解决方案似乎都很复杂,所以在我进入兔子洞之前,我想问一下是否有更简单的方法,即使是不需要JS的方法。
解决方案
我认为使用pseudo-elements
会更好,因为不需要向DOM添加额外的元素。
- 为所有单元格创建具有所需属性的
pseudo-element
。 - 向左移动
pseudo-element
。 - 添加最后添加
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>
相关文章