On gists

Grid - bordered items (top or bottom or full)

CSS

index.html Raw #

<!-- https://codepen.io/gwaradon/pen/poYYbPY -->


<div class="w-500">
    <div class="grid">
        <div class="grid-item">
            Gird item 1
        </div>
        <div class="grid-item">
            Gird item 2
        </div>
        <div class="grid-item">
            Gird item 3
        </div>
        <div class="grid-item">
            Gird item 4
        </div>
        <div class="grid-item">
            Gird item 5
        </div>
        <div class="grid-item">
            Gird item 6
        </div>
    </div>
  </div>
  
  
  <style>
  
  .w-500{
  max-width:500px;
  margin:auto;
}
.grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow:hidden;
   justify-content: center;
  align-items:center;
  text-align:center;
    border: 1px solid #333;
  
}
.grid-item{
    position:relative;
  padding:1rem
}
.grid-item::before, 
.grid-item::after {
   content: '';
   position: absolute;
   background-color: #333;
   z-index: 1;
}
.grid-item::after {
  width: 100vw;
  height: 1px;
  left: 0;
  top: -1px;
}
.grid-item::before {
  width: 1px;
  height: 100vh;
  left: -1px;
  top: 0;
}

</style>