Горизонтальная граница всей строки CSS GRID - PullRequest
Новая
       11

Горизонтальная граница всей строки CSS GRID

0 голосов
/ 28 июня 2018

Мне нужно использовать сетку, но мне также нужна горизонтальная линия, разделяющая каждую строку.

Единственное, что мне удалось найти, - это применить границу к каждой ячейке, но это работает только при наличии достаточного количества ячеек для заполнения каждой строки. 

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.box {
  border-bottom: 2px solid #ffa94d;
  padding: 1em;
}
<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>

Есть ли способ исправить вышеперечисленное, чтобы вся строка имела границу?

1 Ответ

0 голосов
/ 28 июня 2018

Добавьте grid-gap, равный ширине вашей границы, затем рассмотрите градиент для достижения этого: 

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-row-gap:2px;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent 100px,
      #ffa94d 100px,
      #ffa94d 102px /*+2px here*/
    );
}

.box {
  padding: 1em;
}
<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>

Другая идея состоит в том, чтобы рассмотреть псевдоэлемент, который вы добавляете в 1-й, 4-й, 7-й .. (3n + 1)-й элемент: 

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  overflow:hidden;
}

.box {
  position:relative;
  padding: 1em;
}
.box:nth-child(3n + 1)::after {
  content:"";
  position:absolute;
  bottom:0px;
  left:0;
  width:100vw;
  height:2px;
  background:#ffa94d;
}
<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>
...