Border after each row in CSS Grid

Question

I'm trying to make a border-bottom after each row using CSS grid with the content aligned to center. I can't get my head around it.

I want .line to fill the width of the entire .wrapper container.
How can I achieve that?

Here is the code:

* {
  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>

Wondering

I see a border between the first and second rows... how does it differ from what you expect? – Librium

I Expect it to fill the entire 'wrapper' container – Wondering

I have not tried it, but this article might be helpful: Breaking Out With CSS Grid Layout – Librium

I just wanted to be able to put a border between rows in a grid, and the code in this question was helpful for that. – Cosmorama

Answer 1

Instead of justify-content to center content you could add additional columns before and after your content, both with 1fr.

Then position the first div and the div after .line to the start at the second column.

Fiddle

* {
  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>

Ivett

Wow that's awesome man. I did it using <table> pushing the-content from both sides but felt somehow guilty not using css grid ;) Thanks mate ! – Wondering

I thought of doing this, but it doesn't seem very elegant to have a separate div for the border. However, since no other solution on this question that's more elegant than this has been suggested, and considering your high reputation, I am going to use this. – Outstare

Depending on whats going on, I think the idea that there is a separation in a different div actually makes a lot of sense here - ie: it's a separator cell that's a line in an form entry layout, which is what I was looking for. It also meant I could use the grid-gap without having to margin or pad the cells. – Duval

Answer 2

I had some success by using nth-of-type and switching the line to a different type (<span>).

I also added a first and sixth column for the line to span,
while the other items only occupy column 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>

Librium

Answer 3

Here's a responsive solution that works with a variable number of items and without adding silly hard coded divs. Basically every item has a line below, the complicated part is determining the last row items which must not have a line. The example uses flex-box (and LESS) but that's not relevant here, it would also work with grid.

.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;
    }

Smearcase

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

Aceves

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Departure