Как сделать линии сетки видимыми?

Question

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

Проблема с этим решением в том, что если у меня пустые области сетки, линий не будет.Но мне нужны линии вокруг всех областей сетки.Если я добавлю элементы в пустые области сетки и установлю их, будет хорошо только граница, но что, если количество пустых элементов (и непустых элементов) неизвестно?А что если элемент длиннее одной ячейки?Я хочу, чтобы границы вокруг каждой клетки.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
.longer {
  grid-column: auto / span 2;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item longer">7</div>
</div>

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

Поэтому, пожалуйста, дайте мне знать лучшее решение.

Answer 1

Может быть, вы можете установить псевдоэлементы на элементах сетки.

Это псевдо больше сетки, чтобы установить границы там, где нет элемента.

Это делает необходимым несколько настроекпо всей сетке, но в конце вы можете получить более или менее ваш запрос

Псевдо после делает вертикальные линии.Он имеет высоту 300%, чтобы он покрывал не только текущий элемент, но и выходил за его пределы.Это произвольное значение, которое будет работать нормально для большинства сеток.

И псевдо перед тем создает горизонтальные линии, а ширина соответствует тем же критериям

Я добавил эффект на наведение, которое сохраняет толькопосле первого элемента уменьшает высоту, чтобы охватить только родительский элемент

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  overflow: hidden;
  box-shadow: 0px 0px 0px 10px #2196F3;
  margin: 10px;
  border: solid 2px red;
}
.grid-item {
  background-color: lightblue;
  padding: 20px;
  font-size: 30px;
  text-align: center;
  position: relative;
}

.longer {
  grid-column: auto / span 2;
}

.grid-item:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 300%;
  right: -2px;
  top: 0px;
  background-color: red;
  z-index: 1;
}

.grid-container:hover .grid-item:nth-child(n + 2):after {
   background-color: transparent;
}

.grid-container:hover .grid-item:nth-child(1):after {
   background-color: green;
   height: 100%;
  transition: height 3s linear;
}

.grid-item:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 2px;
  left: -2px;
  bottom: -2px;
  background-color: red;
  z-index: 1;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item longer">7</div>

Answer 2

Идея состоит в том, чтобы добавить эти строки, используя несколько фона с linear-gradient:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background:
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc((100% - 20px) / 3 + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(2*((100% - 20px) / 3) + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(100% - 10px) 10px / 1px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc(100% - 10px)  /calc(100% - 20px)  1px;
  padding:10px;
  background-repeat:no-repeat; 
  background-color: #2196F3;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

Как это работает?

Идея заключается в создании линий с градиентом, и каждая из них будет иметь такой формат:

linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) X Y/width height

Как вы можете видеть, я использовал тот же цвет в градиенте, поскольку идея в том, чтобы иметь сплошную линию, тогда нам просто нужно указать размерность и позицию .Для измерения у нас есть два случая: это либо вертикальная линия, поэтому у нас будет [2px 100%] в размерной части, либо горизонтальная линия, и у нас будет [100% 2px] (это всего 1 пиксель для линий на краю) .

Кстати, если вы посмотрите внимательно на код, я не использовал 100%, но я сделал его calc(100% - 20px) из-за отступов, поэтому мы должны удалить его для размера строки.

Теперь нам нужно отрегулировать положение наших строк, и здесь мы должны также рассмотреть заполнение и количество строк / столбцов.Давайте рассмотрим наши случаи, когда у нас есть 3 столбца и 3 строки:

Давайте рассмотрим положение первой строки.Как вы можете видеть, Y довольно прост, это заполнение (10px), но X более сложно, но если вы посмотрите внимательно, мы увидим, что это не очень сложно, и его формула выглядит следующим образом:

10px + (100% - 20px)/3 

Таким образом, у нас есть 10px отступа плюс внутренняя ширина без отступа, разделенная на 3. Мы применяем ту же логику к другим строкам.

Вот пример с построением сетки толькос градиентом:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background:
  /* vertical lines*/
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px 10px / 1px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc((100% - 20px) / 3 + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(2*((100% - 20px) / 3) + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(100% - 10px) 10px / 1px calc(100% - 20px),
  /* horizontal lines*/
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px 10px  /calc(100% - 20px)  1px,
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc((100% - 20px) / 3 + 10px)  / calc(100% - 20px) 2px,
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc(2*((100% - 20px) / 3) + 10px) / calc(100% - 20px) 2px,
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc(100% - 10px)  /calc(100% - 20px)  1px;
  padding:10px;
  background-repeat:no-repeat; 
  background-color: #2196F3;
}
.grid-item {
  opacity:0;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

А вот еще один упрощенный синтаксис с использованием переменных CSS, где вы можете лучше увидеть используемые шаблоны и различные значения:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  --c:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8));
  --p:10px;
  --w:calc(100% - 2*var(--p));
  background:
  /* vertical lines*/
   var(--c) var(--p) var(--p) / 1px var(--w),
   var(--c) calc(1*(var(--w) / 3) + var(--p)) var(--p) / 2px var(--w),
   var(--c) calc(2*(var(--w) / 3) + var(--p)) var(--p) / 2px var(--w),
   var(--c) calc(3*(var(--w) / 3) + var(--p)) var(--p) / 1px var(--w),
  /* horizontal lines*/
   var(--c) var(--p) var(--p) / var(--w)  1px,
   var(--c) var(--p) calc(1*(var(--w) / 3) + var(--p)) / var(--w) 2px,
   var(--c) var(--p) calc(2*(var(--w) / 3) + var(--p)) / var(--w) 2px,
   var(--c) var(--p) calc(3*(var(--w) / 3) + var(--p)) / var(--w) 1px;
  padding:calc(--p);
  background-repeat:no-repeat; 
  background-color: #2196F3;
}
.grid-item {
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>