CSS 显示网格在 Mobile Safari 上不起作用

Question

我想要的是一个带有正方形的图像网格，并且图像位于该正方形的中心。请参阅在桌面上运行的示例。

用google和stackoverflow搜索，但找不到答案。谁知道为什么这在 Mobile Safari 17.4.1 上不起作用。 （它适用于 Chrome、Firefox、Edge 等）

仅供参考：当我在桌面上运行代码片段时，它可以工作，当我在移动设备上打开 stackoverflow 并运行该代码片段时，它无法工作。

.grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-gap: 4px;
    }

    .grid::after {
        display: none;
    }

    .grid-item {
        aspect-ratio: 1;
    }

    .grid-item>img {
        width: 0;
        height: 0;
        min-height: 100%;
        min-width: 100%;
        display: block;
        object-fit: cover;
    }

<div class="card">
        <div class="grid">
            <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
                <img src="https://picsum.photos/200/300" alt="img">
            </a>
            <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
                <img src="https://picsum.photos/200/300" alt="img">
            </a>
            <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
                <img src="https://picsum.photos/200/300" alt="img">
            </a>
            <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
                <img src="https://picsum.photos/200/300" alt="img">
            </a>
            <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
                <img src="https://picsum.photos/200/300" alt="img">
            </a>
            <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
                <img src="https://picsum.photos/200/300" alt="img">
            </a>
            <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
                <img src="https://picsum.photos/200/300" alt="img">
            </a>
            <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
                <img src="https://picsum.photos/200/300" alt="img">
            </a>
            <a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
                <img src="https://picsum.photos/200/300" alt="img">
            </a>
        </div>
    </div>

Answer 1

根据经验，有些代码属性不支持跨多个平台，

当我希望多个项目并排出现时，您可以尝试使用弹性框，这一直对我有用。

对于主 div 类，您可以使用 (display: flex)，对于子 div 类，您可以使用 (flex-grow: 1)。

显然，对于移动设备，您必须使用（列）属性，因为网格不能出现在行中，因为它看起来很奇怪，

您还可以使用媒体查询来分解所有这些，为不同的设备设置视点和属性，因此当查看代码时，即@最小宽度为 600px，那么这些属性集就会启动，这可能是更容易。

希望这有帮助:)