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

05 мая 2021, 14:10

Сверстал данную секцию при помощи грид сетки, но появилась проблема не могу сделать линию посередине, использовал ::after но добавляет под нижний текст, border-right не вариант, потому что линия градиент.

Answer 1

Чуть-чуть ты с :after недоработал. Держи:

.grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-column-gap: 21px; 
  background-color: #555; 
  color: #fff; 
  padding: 10px; 
} 
 
.block { 
  background: rgba(255, 255, 255, 0.1); 
  padding: 30px 0; 
  text-align: center; 
  position: relative; 
} 
 
.block.with_separator:after { 
  content: ""; 
  position: absolute; 
  top: 0; 
  right: -12px; 
  height: 100%; 
  width: 3px; 
  background: linear-gradient(to bottom, #9b1f21 0%, #e2e2e2 100%); 
}

<div class="grid"> 
  <div class="block with_separator">Block 1</div> 
  <div class="block with_separator">Block 2</div> 
  <div class="block">Block 3</div> 
</div>