CODEWITHSUNDEEP
htmlcssreactjshtml-tablecss-grid
Yerlan Yeszhanov
Yerlan Yeszhanov

Reputation: 2449

css grid how to add line between rows?

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

enter image description here

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

enter image description here

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

Upvotes: 7

Views: 20315

Answers (5)

zestyrx
zestyrx

Reputation: 89

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>

Upvotes: 0

Iggy
Iggy

Reputation: 2131

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

Upvotes: 0

Mohsen Haeri
Mohsen Haeri

Reputation: 367

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>

Upvotes: 11

Sergey
Sergey

Reputation: 1075

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.

Upvotes: 0

banerjeesouvik
banerjeesouvik

Reputation: 212

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

Upvotes: 8

Related Questions