CODEWITHSUNDEEP
cssgridalignmentbordervertical-alignment
John
John

Reputation: 105

Centering items in my grid broke its border. Don't understand why

I've added align-items: center in order to center Link 2 vertically due to a very long description. But doing so broke the grid border. How can this be fixed? Thank you in advance. The full code is below:

    table {
      border: 1px solid #000;
      border-collapse: collapse;
    }
    
    
    a {
      color: red;
    }
    
    .tableRow {
      position: relative;
      display: grid;
      text-decoration: none;
      color: inherit;
      grid-template-columns: repeat(2, 1fr);
/*    place-items: center; */
      border: 1px solid #000;
      border-bottom: none;
      align-items: center;
    }
    .tableRow:hover, .tableRow:focus {
      background: #eee;
      outline: none;
    }
    .tableRow:last-child {
      border-bottom: 1px solid #000;
    }
    .tableRow a:not(.tableRowLink) {
      position: relative;
      z-index: 1;
    }
    
    .tableCell {
      padding: 18px;
      border-right: 1px solid #000;
    }
    .tableCell:last-of-type {
      border-right: none;
    }
    
    .tableRowLink {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
<div class="table">
  <div class="tableRow">
    <div class="tableCell"><a href="https://www.apple.com/" target="_blank"><p>Link 1</p></a></div>
    <div class="tableCell"><p>Short Description</p></div>
    <a class="tableRowLink" href="https://www.apple.com/" target="_blank"></a>
  </div>
  <div class="tableRow">
      <div class="tableCell"><a href="https://www.google.com/" target="_blank"><p>Link 2</p></a></div>
      <div class="tableCell"><p>Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description</p></div>
      <a class="tableRowLink" href="https://www.google.com/" target="_blank"></a>
    </div>
</div>

Upvotes: 1

Views: 94

Answers (1)

protob
protob

Reputation: 3583

To fix it you can add align-content: center to the .tableCell instead.

.tableRow {
position: relative;
display: grid;
text-decoration: none;
color: inherit;
grid-template-columns: repeat(2, 1fr);
border: 1px solid #000;
border-bottom: none;
}
.tableRow:hover, .tableRow:focus {
background: #eee;
outline: none;
}
.tableRow:last-child {
border-bottom: 1px solid #000;
}
.tableRow a:not(.tableRowLink) {
position: relative;
z-index: 1;
}

.tableCell {
padding: 18px;
border-right: 1px solid #000;
align-content: center;
display: flex;
align-items: center;
}
.tableCell:last-of-type {
border-right: none;
}

.tableRowLink {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
    <div class="table">
      <div class="tableRow">
        <div class="tableCell"><a href="https://www.apple.com/" target="_blank"><p>Link 1</p></a></div>
        <div class="tableCell"><p>Short Description</p></div>
        <a class="tableRowLink" href="https://www.apple.com/" target="_blank"></a>
      </div>
      <div class="tableRow">
          <div class="tableCell"><a href="https://www.google.com/" target="_blank"><p>Link 2</p></a></div>
          <div class="tableCell"><p>Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description</p></div>
          <a class="tableRowLink" href="https://www.google.com/" target="_blank"></a>
        </div>
    </div>

Upvotes: 1

Related Questions