Question 137060 in Html Question posted in
Some basic documentation can be found here.

Html – how to make a grid so that the borders go beyond the columns in CSS?

I have a design of cards with border above columns
enter image description here
how to make a grid so that the borders go beyond the columns with CSS?

Tags:

2

Answers


  1. 0

    solution using extra table rows on top and bottom with .extend cells and only showing the border-right on them:

    table{
  border-collapse:collapse;
}
.extend{
  border:unset;
  border-right:1px solid black;
  height:30px;
}
td{
  height:100px;
  width:100px;
  border:1px solid black;
  border-left:transparent;
}
.right{
  border-right:transparent;
}
    <table class='table' >
  <tr>
    <td class='extend'></td>
    <td class='extend'></td>
    <td class='extend'></td>
    <td class='extend'></td>
    <td class='extend'></td>
    
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class='right'></td>
  </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class='right'></td>
  </tr>
  <tr>
    <td class='extend'></td>
    <td class='extend'></td>
    <td class='extend'></td>
    <td class='extend'></td>
    <td class='extend'></td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    One solution could be to use pseudoelements on each item to simulate borders. The benefit to this approach is that you don’t need to add any extra HTML elements just for styling purposes.

    However, the downside is that at some screen widths you might see the lines appear slightly thicker due to subpixel rendering.

    .wrapper {
  display: flex;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 50px 0;
  position: relative;
  width: 80%;
}

.cell {
  align-items: center;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  position: relative;
}

.cell::after,
.cell::before {
  content: "";
  display: block;
  height: calc(100% + 50px);
  position: absolute;
  width: 100%;
}

.cell::after {
  box-shadow: inset 1px 1px 0px 0px #e6e6e6;
  left: -1px;
  top: 0px;
}

.cell::before {
  bottom: -1px;
  box-shadow: inset -1px -1px 0px 0px #e6e6e6;
  left: 0;
}

.cell:nth-child(6)::before,
.cell:nth-child(12)::before {
  box-shadow: inset 0 -1px 0px 0px #e6e6e6;
}

.cell:first-child::after,
.cell:nth-child(7)::after {
  box-shadow: inset 0px 1px 0px 0px #e6e6e6;
}
    <div class="wrapper">
  <ul class="grid">
       <li class="cell">Content</li>
       <li class="cell">Content</li>
       <li class="cell">Content</li>       
       <li class="cell">Content</li>
       <li class="cell">Content</li>
       <li class="cell">Content</li>
       <li class="cell">Content</li>
       <li class="cell">Content</li>
       <li class="cell">Content</li>       
       <li class="cell">Content</li>
       <li class="cell">Content</li>
       <li class="cell">Content</li>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search