С помощью CSS сетки, как сделать так, чтобы дочерний тег p совпадал с auto width, сделанным child в той же сетке?

Question

У меня есть .post div, который является display: grid, и я сделал все столбцы и строки автоматически, чтобы приспособиться к размеру любого моего img. Максимальная ширина img равна 19em, и я не хочу, чтобы div .post превышал значение ширины изображения с этой максимальной шириной, но когда мой тег p слишком длинный, ширина моего div увеличивается на это, за пределами ширины img. Я хочу, чтобы тег p шел на следующую строку ниже, когда он выходит за пределы ширины моего img, но я не уверен, как это сделать.

.post {
  display: inline-grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  border: solid 2px gray;
  margin: 5px 10px;
  grid-template-areas:
  'top top top'
  'name name name'
  'comment comment .';
}

.post > img {
  max-height: 19em;
  max-width: 19em;
  grid-area: top;
}

.post > h3 {
  grid-area: name;
  padding-left: 5px;
  padding-top: 5px;
  color: #0f0;
}

.post > p {
  grid-area: comment;
  padding: 4px 4px 6px 6px;
  white-space: initial;
}

<div class="post">
  <img src="https://placehold.it/600x400" alt="">
  <h3>Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

РЕДАКТИРОВАТЬ: Я не хочу исправлять это, устанавливая высоту автоматически на моих изображениях, так как некоторые из моих изображений слишком велики, я хочу ограничить их высоту 19em. Как я могу решить эту проблему, не снимая ограничения по высоте на моем изображении?

Answer 1

Я решил это, создав контейнер div и используя max-height и min-height в моем img. Вот что я изменил -

   <div class='post'>
        <div class='post2'>
           <img src='uploadedFiles/<?php echo $image->image; ?>' alt='$image->id'>
           <h3><?php echo $image->user; ?></h3>
           <p>"<?php echo $image->description; ?>"</p>
        </div>
    </div> 


.post {

    display: inline-grid;

    border: solid 2px gray;

    margin: 5px 10px;

    max-width : 19em;

    text-align: center;

}

.post2 {

    max-width: 19em;

    display:inline-block;
}

.post2 > img {

    max-height: 19em;

    min-width:100%;

    max-width: 100%;

    cursor: pointer; 

}

.post2 > h3 {

    padding-left : 5px;

    padding-top : 5px;

    font-weight: bold;

    color: #00ff00;

}

.post2 > p {


    padding: 4px 4px 6px 6px;

    white-space: initial;

    word-wrap: break-word;

}

Answer 2

Просто установите ширину max-width:19em; для всего деления.

.post {
    max-width: 19em;
}

Надеюсь, это вам поможет.