3 Ячейка сетки не равна ширине, так как они меняются в зависимости от текста

Question

У меня есть небольшой кусочек HTML в теле сообщения для прессы, в котором у меня есть (хочу) 3 блока одинаковой ширины, за исключением того, что третий блок меньше, если у меня меньше текста (или больше в другом блоке), и я не могу понять,как сохранить размеры статическими.

Я пытался добавить CSS-контейнеры, физическую ширину, но ничего не изменилось.

Текущий код:

<div>
<div class="page-content">
<div class="grid grid--thirds">
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B1HEADERTEXT</h5>
<p>B1BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B2HEADERTEXT</h5>
<p>B2BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B3HEADERTEXT</h5>
<p>B3BPDYTEXT</p>
</div>
</a>
</div>
</div>
</div>
</div>

Как это выглядит:

С различным количеством текста:

<div>
<div class="page-content">
<div class="grid grid--thirds">
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B1HEADERTEXT</h5>
<p>B1BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B2HEADERTEXT</h5>
<p>B2BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B3HEAD</h5>
<p>B3BPDYTEXT</p>
</div>
</a>
</div>
</div>
</div>
</div>

Как это выглядит:

Answer 1

Судя по опубликованному вами изображению, создается впечатление, что родительский или родительский контейнер ведет себя как flex или grid или что-то подобное.

Если вы не хотите, чтобы содержимое каждого блока влияло на ширину любого блока, вы можете сделать это, применив следующий код к каждому блоку.

.box {
  width: calc(100% / 3);
  word-wrap: break-word;
}