Card Grid

Output

Card title

Quis officiis quod ad culpa adipisci architecto alias, optio nobis amet minima aut itaque dolorum quae perferendis omnis excepturi a assumenda vel.

Call to action

Card title

Quis officiis quod ad culpa adipisci architecto alias, optio nobis amet minima aut itaque dolorum quae perferendis omnis excepturi a assumenda vel.

Call to action

Card title

Quis officiis quod ad culpa adipisci architecto alias, optio nobis amet minima aut itaque dolorum quae perferendis omnis excepturi a assumenda vel.

Call to action

Card title

Quis officiis quod ad culpa adipisci architecto alias, optio nobis amet minima aut itaque dolorum quae perferendis omnis excepturi a assumenda vel.

Call to action

Card title

Quis officiis quod ad culpa adipisci architecto alias, optio nobis amet minima aut itaque dolorum quae perferendis omnis excepturi a assumenda vel.

Call to action

Card title

Quis officiis quod ad culpa adipisci architecto alias, optio nobis amet minima aut itaque dolorum quae perferendis omnis excepturi a assumenda vel.

Call to action

Card title

Quis officiis quod ad culpa adipisci architecto alias, optio nobis amet minima aut itaque dolorum quae perferendis omnis excepturi a assumenda vel.

Call to action

Code

<style>
.flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    .content-card {
        border: none;
        outline: 2px solid oklch(from var(--secondary) calc(l * 0.75) c h / 0.5);
        overflow: hidden;
        isolation: isolate;
        border-radius: 1rem;
        width: min(100%, calc(50% - 1rem));
        
        article {
            background: var(--bg);
            color: contrast-color(var(--bg));
            img {
                width: 100%;
                display: block;
            }
        }
        .content {
            padding: 1rem;
        }
    }
}

</style>

<div class="flex-row">
    <div class="content-card">
        <article>
          <img src="/assets/old-car.jpg" alt="car" />
          <div class="content prose" data>
            <h1 class="fs-2">Card title</h1>
            <p>
              Quis officiis quod ad culpa adipisci architecto alias, optio nobis
              amet minima aut itaque dolorum quae perferendis omnis excepturi a
              assumenda vel.
            </p>
            <p>
                <a href="#" class="button">Call to action</a>
            </p>
          </div>
        </article>
    </div>
    <div class="content-card">
        <article>
          <img src="/assets/old-car.jpg" alt="car" />
          <div class="content prose" data>
            <h1 class="fs-2">Card title</h1>
            <p>
              Quis officiis quod ad culpa adipisci architecto alias, optio nobis
              amet minima aut itaque dolorum quae perferendis omnis excepturi a
              assumenda vel.
            </p>
            <p>
                <a href="#" class="button">Call to action</a>
            </p>
          </div>
        </article>
    </div>
    <div class="content-card">
        <article>
          <img src="/assets/old-car.jpg" alt="car" />
          <div class="content prose" data>
            <h1 class="fs-2">Card title</h1>
            <p>
              Quis officiis quod ad culpa adipisci architecto alias, optio nobis
              amet minima aut itaque dolorum quae perferendis omnis excepturi a
              assumenda vel.
            </p>
            <p>
                <a href="#" class="button">Call to action</a>
            </p>
          </div>
        </article>
    </div>
    <div class="content-card">
        <article>
          <img src="/assets/old-car.jpg" alt="car" />
          <div class="content prose" data>
            <h1 class="fs-2">Card title</h1>
            <p>
              Quis officiis quod ad culpa adipisci architecto alias, optio nobis
              amet minima aut itaque dolorum quae perferendis omnis excepturi a
              assumenda vel.
            </p>
            <p>
                <a href="#" class="button">Call to action</a>
            </p>
          </div>
        </article>
    </div>
    <div class="content-card">
        <article>
          <img src="/assets/old-car.jpg" alt="car" />
          <div class="content prose" data>
            <h1 class="fs-2">Card title</h1>
            <p>
              Quis officiis quod ad culpa adipisci architecto alias, optio nobis
              amet minima aut itaque dolorum quae perferendis omnis excepturi a
              assumenda vel.
            </p>
            <p>
                <a href="#" class="button">Call to action</a>
            </p>
          </div>
        </article>
    </div>
    <div class="content-card">
        <article>
          <img src="/assets/old-car.jpg" alt="car" />
          <div class="content prose" data>
            <h1 class="fs-2">Card title</h1>
            <p>
              Quis officiis quod ad culpa adipisci architecto alias, optio nobis
              amet minima aut itaque dolorum quae perferendis omnis excepturi a
              assumenda vel.
            </p>
            <p>
                <a href="#" class="button">Call to action</a>
            </p>
          </div>
        </article>
    </div>
    <div class="content-card">
        <article>
          <img src="/assets/old-car.jpg" alt="car" />
          <div class="content prose" data>
            <h1 class="fs-2">Card title</h1>
            <p>
              Quis officiis quod ad culpa adipisci architecto alias, optio nobis
              amet minima aut itaque dolorum quae perferendis omnis excepturi a
              assumenda vel.
            </p>
            <p>
                <a href="#" class="button">Call to action</a>
            </p>
          </div>
        </article>
    </div>
</div>