css grid how to add line between rows?

Question

I'm making a table using css grid. I cant add border line to the rows . There is a gap between columns . It should be like in the image

Here what I got when I'm adding border-bottom to the cells:

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

You can check here: https://codesandbox.io/s/goofy-easley-w5rrg

Kingly

I guess it's not possible to style row/column of the grid, though you could wrap your spans into, say, divs and stretch them to occupy the entire width of the cell: > div { width: 100%; display: flex; & > span { justify-content: left; }} – Lungki

here is a bunch of ideas as well #46308548 – Lungki

@EvgenyTimoshenko still gap between columns – Kingly

Answer 1

If you want to keep the gap between the items, you can add an empty item between every row and stretch it to entire width of the container (using grid-column property) then add a border to it.

You can see the example here:

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

Strobel

Answer 2

If you want to have separator lines in between rows, try the following approach.

1. Give the grid some background-color.
2. Give grid-row-gap: 1px (depends on the thickness required)
3. Give white background to every child of the grid

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

Balmung

Answer 3

Ok, here is a small lifehack. Looks little bit goofy, but works.

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

If you will use wide screens layout, just increase 150% to 300% or something like this.

Grabble

It helps to fill the gaps between the columns. Looks strange, but works. Also parent div should be overflow: hidden; – Grabble

Answer 4

Good old ::after will help - position: absolute can skip the grid.

Position relative on top DL element. Then position absolute is taking 100% of space. You can move ::after with margins, don't use bottom, cause it will go to the bottom of DL.

Here I have DL and needed lines between rows of 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;
}

Lenhard

Answer 5

You can use a row wrapper with display: contents to accomplish this:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.row {
  display: contents;
}

.row > div {
  border-bottom: 1px solid black;
}

<div class="container">
  <div class="row">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
    <div class="column">column 4</div>
  </div>
  <div class="row">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
    <div class="column">column 4</div>
  </div>
</div>

Leslielesly

Very limited support as of writing this comment caniuse.com/css-display-contents – Jagatai

@TJ I think your comment is a bit misleading. The support is 95.14% and includes all major browsers. – Leslielesly

The 95.49% is partial support. Full support would be shown in bright green color. Each browser behaves differently and you'll have to take care of all the browser specific quirks in partial support. – Jagatai