CSS Grid Collapse / Auto Shrink Children

Question

NOTE: All needs to be done in CSS Grid

Below is my code and a screenshot. For some reason the content is overflowing its container. All content should fit inside of the cell, but it is breaking out. That leads me to a couple questions that I will list below:

1. Is it possible to make the contents of a cell in this case fit the container? The content should fit inside the cell.
2. Also, is there a way to shrink the cells to the size of the content? For example in flex you could just set display:flex and it fits to the container automatically. I would also like to refrain from using minmax() with a static value if possible. For example grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); has a static value of 100px, but I don't ever know what that value will be. Let me know if that doens't make sense.

SCSS

.row,
.column {
    display:grid;
    margin:auto;
    max-width:1200px;
}

.row {
    grid-template-columns:repeat(12, 1fr);
    grid-column-gap:120px;

    .cell {
        grid-column:span 12;
        &.large-3 {
            grid-column:span 3
        }

    }
}

HTML

<div class="row row-gap">
        <div class="cell large-3">
            <h4>Menu</h4>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Shoup's</a></li>
                    <li><a href="#">Shop Online</a></li>
                    <li><a href="#">News Archive</a></li>
                    <li><a href="#">Contact Shoups</a></li>
                </ul>
            </nav>
        </div>
        <div class="cell large-3">
            <h4>Services</h4>
            <nav>
                <ul>
                    <li><a href="#">Shoup's Catering</a></li>
                    <li><a href="#">Arborwood by Shoup's</a></li>
                    <li><a href="#">On The Rocks</a></li>
                    <li><a href="#">Shoup's Country Store</a></li>
                </ul>
            </nav>
        </div>
        <div class="cell large-3">
            <div class="reviews">
                <div class="item flex justify-between align-center">
                    <div class="block">
                        <div class="rating flex">

                            @for($i = 1; $i <= $rating; $i++)
                                @svg('star')
                            @endfor

                        </div>
                        <div class="info">
                            <p class="name">Shoups Seasoning</p>
                            <p class="review">by Torie</p>
                        </div>
                    </div>
                    <div class="block">
                        <div class="image">
                            <img src="" alt="">
                        </div>
                    </div>
                </div>
                <hr>
                <div class="item flex justify-between align-center">
                    <div class="block">
                        <div class="rating flex">

                            @for($i = 1; $i <= $rating; $i++)
                                @svg('star')
                            @endfor

                        </div>
                        <div class="info">
                            <p class="name">Shoups Seasoning</p>
                            <p class="review">by Donna Jackson</p>
                        </div>
                    </div>
                    <div class="block">
                        <div class="image">
                            <img src="" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cell large-3">
            <h4>Contact</h4>
            <p>Connect with us to receive promotional updates and specials.</p>
            <div class="social">
                <ul class="flex">
                    <li><a href="#">@svg('facebook')</a></li>
                    <li><a href="#">@svg('twitter')</a></li>
                    <li><a href="#">@svg('linked-in')</a></li>
                    <li><a href="#">@svg('google-plus')</a></li>
                    <li><a href="#">@svg('pinterest')</a></li>
                </ul>
            </div>
        </div>
    </div>