Содержимое CSS Grid неправильно переносится

Question

Я создал сетку с элементами сетки, которые выводят настраиваемые поля из темы WordPress, например, Title, Subtitle и Excerpt.

Когда у меня в сетке был какой-то удерживающий текст с тегом ap, текст был перенесен правильно.

Однако теперь, когда фиктивный контент заменен на функцию, текст представляет собой одну строку, которая не переносится в div сетки.

Пример изображения

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

Код здесь:

HTML:

<div class="grid-item">
     <div class="grid-header">
         <div class="grid-header-text">
             <h3 class="grid-title"><?php the_title(); ?></h3>
             <h4 class="grid-subtitle"><?php the_field('grid_subtitle'); ?> </h4>
         </div>

         <div class="grid-header-icon"> 
             <i class="fas fa-angle-double-up fa-3x"></i> 
         </div>
     </div>

     <div class="grid-body">     
         <p class="content">
             <?php the_field('grid_excerpt'); ?>
         </p>
     </div>
</div>

CSS:

.feature-grid {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr;
}


.grid-item {
    border: solid black 1px;
    line-height: 2em;
    border-radius: 9px;

}

.grid-header {
    background: black;
    color: white;
    padding: 1em;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-height: 100px;

}

.grid-body {}

родительский элемент по запросу одного пользователя:

<div class="section grid-section">

    <div class="feature-grid">

    <?php $frontPageGrid = new WP_Query(array(
'post_type' => 'grid-item',
'posts_per_page' => 4,
'order' => 'ASC'

));

while ($ frontPageGrid-> have_posts ()) {$ frontPageGrid-> the_post ();?>

        <div class="grid-item">

            <div class="grid-header">

                <div class="grid-header-text">

                    <h3 class="grid-title"><?php the_title(); ?></h2>
                        <h4 class="grid-subtitle"><?php the_field('grid_subtitle'); ?> </h3>
                </div>
                <div class="grid-header-icon"> <i class="fas fa-angle-double-up fa-3x"></i> </div>
            </div>

            <div class="grid-body">

            <p class="content">
            <?php the_field('grid_excerpt'); ?>
            </p>

            </div>
        </div>