CSS网格折叠/自动收缩子级

Question

注意：所有操作都需要在CSS网格中完成

下面是我的代码和屏幕截图。由于某种原因，内容溢出了其容器。所有内容都应适合单元格的内部，但正在破裂。这就引出了我将在下面列出的几个问题：

1. 在这种情况下是否可以使单元格的内容适合容器？内容应适合单元格之内。
2. 还有，有没有办法将单元格缩小到内容的大小？例如，在flex中，您只需设置display:flex，它就会自动适合容器。如果可能，我还想避免将minmax（）与静态值一起使用。例如grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));的静态值为100px，但我永远不知道该值是多少。让我知道这是否没有道理。

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>