CSS сетки, как добавить линию между строками?

Question

Я делаю таблицу с использованием сетки 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

Answer 1

Если вы хотите, чтобы между строками были разделительные линии, попробуйте следующий подход.

1. Дайте сетке немного фона.
2. Дайте grid-row-gap: 1px (зависит от требуемой толщины)
3. Дайте белый фон каждому ребенку сетки

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

Answer 2

Хорошо, вот небольшой лайфхак.Выглядит немного глупо, но работает.

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% или что-то в этом роде.