html - 使用 CSS 网格将文本环绕在图像周围

Question

我正在学习 css 网格并使用它来布局我的网站，4 列 2 行。在这些列中的每一列中都有一个单独的网格项。一个网格项包含文本，另一个包含图像。当我将屏幕宽度调整为 520 像素左右时，包含文本的网格项变成了一个长列。有没有一种方法可以让文本环绕图像

目前，当我将屏幕大小调整为 520 像素时，我得到了这个

下面是包含我网站的一个小样本的代码笔。

https://codepen.io/humzaysf/pen/BaKOxXJ

<section class="about-us-section section-header">
        <h1 class="about-us-header header-title">
            About Us
        </h1>
</section>

<div class="section-container">
    <div class="section-content history">
        <h4 class="content-sub-title ">
            History
        </h4>
        <p class="content">
            I'm in the shizzle izzle tortor. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle we gonna chung rhoncus
            fizzle. In hac get down get down sheezy shut the shizzle up. Break yo neck, yall, mattizzle ac, eleifend
            vitae, nunc. That's the shizzle suscipit. Pimpin' sempizzle that's the shizzle sizzle fo shizzle mah nizzle
            fo rizzle, mah home g-dizzle.
        </p>
    </div>
    <img src="https://images.unsplash.com/photo-1421809313281-48f03fa45e9f?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000" alt="" class="history-image content-image">


    <div class="section-content aims">
        <h4 class="content-sub-title ">
            Aims
        </h4>
        <p class="content">
            I'm in the shizzle izzle tortor. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle we gonna chung rhoncus
            fizzle. In hac get down get down sheezy shut the shizzle up. Break yo neck, yall, mattizzle ac, eleifend
            vitae, nunc. That's the shizzle suscipit. Pimpin' sempizzle that's the shizzle sizzle fo shizzle mah nizzle
            fo rizzle, mah home g-dizzle.
        </p>
    </div>

    <div class="section-content quality">
        <h4 class="content-sub-title ">
            Quality
        </h4>
        <p class="content">
            I'm in the shizzle izzle tortor. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle we gonna chung rhoncus
            fizzle. In hac get down get down sheezy shut the shizzle up. Break yo neck, yall, mattizzle ac, eleifend
            vitae, nunc. That's the shizzle suscipit. Pimpin' sempizzle that's the shizzle sizzle fo shizzle mah nizzle
            fo rizzle, mah home g-dizzle.
        </p>
    </div>
    <img src="assets/images/window/im3rd-media-8-gTweicLAk-unsplash.jpg" alt="" class="quality-image content-image">

标签： htmlcsscss-grid