css - CSS Grid Collapse / Auto Shrink Children

Question

注意：所有需要在 CSS Grid 中完成

下面是我的代码和截图。由于某种原因，内容溢出了它的容器。所有内容都应该放在单元格内，但它正在爆发。这让我想到了几个问题，我将在下面列出：

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>

标签： csssasscss-grid