css grid 如何在行之间添加线？

Question

我正在使用 css 网格制作一个表格。我无法向行添加边框线。柱与柱之间有间隙。应该像图片中那样

这是我向单元格添加 border-bottom 时得到的结果：

const TableWrapperUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #dbeaf4;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    fit-content(400px)
  );
  justify-items: center;
  padding: 5px;
  justify-content: space-between;
  > span {
    justify-self: left;
    border-bottom: 1px solid red;
  }
`;

您可以在这里查看：https ://codesandbox.io/s/goofy-easley-w5rrg

Answer 1

如果要保持项目之间的间隙，可以在每行之间添加一个空项目并将其拉伸到容器的整个宽度（使用grid-column属性），然后为其添加边框。

您可以在此处查看示例：

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

.row-border{
    border-top: 2px solid gray;
    grid-column: 1 / 5; /* this code makes the row stretch to entire width of the container */
}

<div class="container">
  <div>col 1 of row 1</div>
  <div>col 2 of row 1</div>
  <div>col 3 of row 1</div>
  <div>col 4 of row 1</div>
  
  <div class="row-border"></div>

  <div>col 1 of row 2</div>
  <div>col 2 of row 2</div>
  <div>col 3 of row 2</div>
  <div>col 4 of row 2</div>

  <div class="row-border"></div>

  <div>col 1 of row 3</div>
  <div>col 2 of row 3</div>
  <div>col 3 of row 3</div>
  <div>col 4 of row 3</div>

  <div class="row-border"></div>

  <div>col 1 of row 4</div>
  <div>col 2 of row 4</div>
  <div>col 3 of row 4</div>
  <div>col 4 of row 4</div>
</div>

Answer 2

如果您想在行之间添加分隔线，请尝试以下方法。

1. 给网格一些背景颜色。
2. 给予grid-row-gap: 1px（取决于所需的厚度）
3. 为网格的每个子项提供白色背景

const TableWrapperUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #dbeaf4;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    fit-content(400px)
  );
  padding: 5px;
  background-color: #eaeaea;  // step 1
  grid-row-gap: 1px;  // step 2

  > span {
    display: block;
    background-color: #ffffff; // step 3
  }
`;

Answer 3

好的，这是一个生活小窍门。看起来有点傻，但是有效。

const TableWrapperUI = styled.div
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #ff0000;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    fit-content(400px)
  );
  justify-items: center;
  padding: 5px 5px 5px 0;
  overflow: hidden;
  justify-content: space-between;
  > span {
    justify-self: left;
    border-bottom: 1px solid #d1d1d1;
    width:150%;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
  }
;

演示版

如果您将使用宽屏幕布局，只需增加 150% 至 300% 或类似的值即可。