我怎样才能在网格中有没有边框的垂直线答案

【问题标题】：How can I have vertical lines without borders in Grid我怎样才能在网格中有没有边框的垂直线
【发布时间】：2023-02-10 17:33:23
【问题描述】：

我正在尝试绘制无边框的垂直线。

我试过这段代码。但它在一个盒子里画水平线。有人可以告诉我该怎么做吗？

<!DOCTYPE html><html><head><style>.grid-container {
  display: grid;
  color: #fff;
  opacity: .5;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
}

</style></head><body><h1>Grid Elements</h1><p>A Grid Layout must have a parent element with the <em>display</em>property set to <em>grid</em>or <em>inline-grid</em>.</p><p>Direct child element(s) of the grid container automatically becomes grid items.</p><div class="grid-container"><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div></div></body></html>

【问题讨论】：

标签： html css

【解决方案1】：

我不确定这是否会准确回答您正在寻找的内容，但是如果您将 border-right，border-left 放在“垂直”线

.grid-container {
  display: grid;
  color: #fff;
  opacity: .5;
}

.grid-item {
  border-right: 1px solid rgba(0, 0, 0, 0.8);
  border-left: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
}

<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em>property set to <em>grid</em>or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

【讨论】：