CSS 网格中每行之后的边框

Question

我正在尝试使用 CSS 网格在每行之后制作一个

border-bottom

，并将内容对齐到中心。我无法理解它。

我希望

.line

填充整个

.wrapper

容器的宽度。
我怎样才能做到这一点？

这是代码：

* {
  box-sizing: border-box;
}

.outer {
  width: 80%;
  margin: 0 auto;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, auto) max-content;
  justify-content: center;
}

.wrapper>div:not(.line) {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.line {
  grid-column-start: 1;
  grid-column-end: 6;
  height: 2px;
  border-bottom: 1px solid black;
  width: 100%;
}

<div class="outer">
  <div class="wrapper">
    <div>1111111</div>
    <div>222</div>
    <div>3333333333</div>
    <div class="line"></div>
    <div>4444</div>
    <div>555555555</div>
    <div>99999999999</div>
  </div>
</div>

Answer 1

您可以使用

justify-content

在内容之前和之后添加其他列，而不是使用

1fr

来居中内容。

然后将第一个

div

和

div

之后的

.line

定位到第二列的开头。

小提琴

* {
  box-sizing: border-box;
}

.outer {
  width: 80%;
  margin: 0 auto;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
}

.wrapper>div:not(.line) {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper > div:first-of-type,
.line + div {
  grid-column: 2;
}

.line {
  grid-column: 1 / -1;
  height: 1px;
  background: black;
}

<div class="outer">
  <div class="wrapper">
    <div>1111111</div>
    <div>222</div>
    <div>3333333333</div>
    <div class="line"></div>
    <div>4444</div>
    <div>555555555</div>
    <div>99999999999</div>
  </div>
</div>

Answer 2

这是一个响应式解决方案，适用于可变数量的项目，并且无需添加愚蠢的硬编码div。基本上每个项目下面都有一行，复杂的部分是确定最后一行项目不能有一行。该示例使用了 flex-box （和 LESS），但这与这里无关，它也可以与网格一起使用。

.grid {
    display: flex;
}
.grid-item{
    position: relative;
    .one-col{
        flex-basis: 100%/1;
        &:nth-last-child(1){
            &:after{ border-bottom: 0; }
        }
    }
    .two-cols{
        flex-basis: 100%/2;
        &:nth-last-child(1),
        &:nth-last-child(2):nth-child(odd){
            &:after{ border-bottom: 0; }
        }
    }
    .three-cols{
        flex-basis: 100%/3;
        &:nth-last-child(1),
        &:nth-last-child(2):nth-child(3n+1),
        &:nth-last-child(2):nth-child(3n+2),
        &:nth-last-child(3):nth-child(3n+1){
            &:after{ border-bottom: 0; }
        }
    }
    .four-cols{
        flex-basis: 100%/4;
        &:nth-last-child(1),
        &:nth-last-child(2):nth-child(4n+1),
        &:nth-last-child(2):nth-child(4n+2),
        &:nth-last-child(2):nth-child(4n+3),
        &:nth-last-child(3):nth-child(4n+1),
        &:nth-last-child(3):nth-child(4n+2),
        &:nth-last-child(4):nth-child(4n+1){
            &:after{ border-bottom: 0; }
        }
    }

    @media screen and (max-width: @screen__sm) {
        .grid-item .one-col;
    }
    @media screen and (min-width: @screen__sm) and (max-width: (@screen__md - 1)) {
        .grid-item .two-cols;
    }
    @media screen and (min-width: @screen__md) and (max-width: (@screen__lg - 1)) {
        .grid-item .three-cols;
    }
    @media screen and (min-width: @screen__lg) {
        .grid-item .four-cols;
    }

    &:after{
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-bottom: solid 1px black;
    }

Answer 3

我通过使用

nth-of-type

并将线路切换到不同类型 (

<span>

) 取得了一些成功。

我还添加了第一列和第六列以供线跨越，
而其他项目只占据第2-5列。

* {
  box-sizing: border-box;
}

.outer {
  width: 80%;
  margin: 0 auto;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
  justify-content: center;
}

.wrapper>div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper>div:nth-of-type(3n+1) {
  grid-column: 2;
}

.line {
  grid-column: 1/6;
  height: 2px;
  border-bottom: 1px solid black;
}

<div class="outer">
  <div class="wrapper">
    <div>1111111</div>
    <div>222</div>
    <div>3333333333</div>
    <span class="line"></span>
    <div>4444</div>
    <div>555555555</div>
    <div>6666666</div>
    <span class="line"></span>
    <div>77777</div>
    <div>888888888</div>
    <div>99</div>
  </div>
</div>

Answer 4

#uc_post_grid_elementor_aad741f.uc_post_grid_style_one .uc_post_grid_style_one_wrap {
    display: grid;
    position: relative !important;
    overflow: hidden;
}

#uc_post_grid_elementor_aad741f .ue_post_grid_item {
    position: static !important;
    overflow: visible;
}


#uc_post_grid_elementor_aad741f .ue_post_grid_item:nth-child(3n+1)::after {
    content: '';
    height: 2px;
    width: 1080px;/Responsive with media query/
    max-width: 1024px !important;
    border: 1px solid #D3E6EA;
    color: #D3E6EA;
    display: inline-block;
}