Как добавить вертикальную линию между элементами сетки? - PullRequest
Новая
       4

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

1 голос
/ 08 мая 2020

У меня сейчас проблемы с добавлением вертикальной линии между элементами сетки. В моем текущем решении есть пустые места между строками, и я не могу работать с границами, потому что граница будет непосредственно «приклеиваться» к элементу, а не посередине двух элементов.

Этот код выше в настоящее время выглядит следующим образом:

current code

Но это должно выглядеть так:

enter image description here

#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
}

.grid-item {
  height: 20px;
  background-color: red;
  position: relative;
}

.grid-item::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 2px;
  background: grey;
  right: -9px
}
<div id="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Ответы [ 3 ]

2 голосов
/ 08 мая 2020

Вы можете увеличить высоту псевдонимов в размере промежутка и установить overflow: hidden в сетке, чтобы скрыть псевдо последней строки 

#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  overflow: hidden;
}

.grid-item {
  height: 20px;
  background-color: red;
  position: relative;
}

.grid-item::after {
  content: "";
  position: absolute;
  height: calc(100% + 16px);
  width: 2px;
  background: grey;
  right: -9px
}
<div id="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>
1 голос
/ 08 мая 2020

Вы можете сделать это с фоном и легко настроить, даже если вы измените столбцы шаблона: 

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background:linear-gradient(#000,#000) center/2px 100% no-repeat;
  grid-gap: 16px;
  margin:5px;
}

.grid-item {
  height: 20px;
  background-color: red;
  position: relative;
}


.grid-container.another {
  grid-template-columns: 2fr 1fr;
  background-position:66.5% 0;
}

.grid-container.column-3 {
  grid-template-columns: 1fr 1fr 1fr;
  background:
    linear-gradient(#000,#000) center/2px 100% no-repeat,
    linear-gradient(#000,#000) center/2px 100% no-repeat;
  background-position:33% 0, 67% 0;
}
<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="grid-container another">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="grid-container column-3">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>
0 голосов
/ 08 мая 2020

Вот перо с кодом решения.

CodePen 

#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  position: relative;
}

.grid-item {
  height: 20px;
  background-color: red;
  position: relative;
}

.border {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background: grey;
  right: -9px
}
<body>
  <div id="grid-container">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <span class="border"></span>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...