Центрирование элементов в моей сетке нарушило ее границу. Не понимаю, почему

Я добавил align-items: center, чтобы центрировать Link 2 по вертикали из-за очень длинного описания. Но это нарушило границу сетки. Как это можно исправить? Заранее спасибо. Полный код ниже:

    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>

css grid alignment border vertical-alignment

11.02.2023 00:09

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы исправить это, вы можете вместо этого добавить align-content: center к .tableCell.

.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>

Извините, забыл вас спросить. Знаете ли вы, как сделать первый столбец (ссылка 1 и ссылка 2) подходящим для содержимого?

— 12.02.2023 00:03

Вы имеете в виду выравнивание ссылок сверху? Просто удалите display: flex; из .tableCell

— 12.02.2023 04:49

Нет, я имел в виду минимизировать ширину первого столбца. Сейчас сетка разделена 50/50. Но первому столбцу не нужна ширина 50%. Он слишком широк для своего содержания. Есть ли способ сделать первый столбец таким же широким, как слова «Ссылка 1» и «Ссылка 2»? Спасибо.

— 12.02.2023 05:28

Хорошо, попробуйте заменить это grid-template-columns: repeat(2, 1fr) на grid-template-columns: auto 1fr; в .tableRow. Он должен создать два столбца с первой автоматической шириной

— 12.02.2023 05:43

Я сделал. Это не идеально. Когда я заменяю «Ссылка 1» на «shortlink.com» и «Ссылка 2» на «verylonglink.com», ячейки имеют разную ширину. Смотрите здесь: ссылка

— 12.02.2023 05:52

Любое исправление проблемы, описанной в моем предыдущем комментарии? Был бы очень признателен.

— 13.02.2023 03:11

11.02.2023 08:34