css网格如何在行之间添加线？

Posted 2023-03-06

【中文标题】css网格如何在行之间添加线？

【英文标题】：css grid how to add line between rows?

【发布时间】：2019-11-15 22:19:52

【问题描述】：

我正在使用 CSS 网格制作表格。我无法在行中添加边框线。列之间有间隙。应该和图片一样

当我将边框底部添加到单元格时，我得到了什么：

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

【问题讨论】：

我想不可能对网格的行/列进行样式设置，尽管您可以将跨度包装到例如 div 中并拉伸它们以占据单元格的整个宽度：> div width: 100%; display: flex; & > span justify-content: left; 跨度>

这里还有一堆想法***.com/questions/46308048/…

@EvgenyTimoshenko 列之间仍有差距

【参考方案1】：

Good old ::after 会有所帮助 - position: absolute 可以跳过网格。

相对于顶部 DL 元素的位置。然后绝对位置占用 100% 的空间。你可以移动 ::after 与边距，不要使用底部，因为它会到 DL 的底部。

这里我有 DL 和需要的 DT + DD 行之间的行。

.section dl 
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 40px 1.2rem;
    position: relative;


.section dd 
    padding: 0 0 40px;
    margin: 0;

.section dd:not(:last-child)::after 
    content: '';
    height: 1px;
    width: 100%;
    background: #000;
    position: absolute;
    right: 0;
    margin-top: 40px;

【参考方案2】：

如果你想保持项目之间的间隙，你可以在每一行之间添加一个空项目并将其拉伸到容器的整个宽度（使用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>

【参考方案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;
  
;

DEMO

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

【讨论】：

它有助于填补列之间的空白。看起来很奇怪，但有效。父 div 也应该溢出：隐藏；

【参考方案4】：

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

给网格一些背景色。 给grid-row-gap: 1px（取决于需要的厚度） 为网格的每个子元素提供白色背景

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
  
`;