CSS三列网格布局：首列先于其他列缩放的问题求助

我设置了一个网格容器，属性为grid-template-columns: repeat(3, 1fr);，布局为3列4行共12个div。每个div为相对定位，背景设为url('/img/img.jpg') no-repeat center center/cover，内部有类名为product-info的div作为覆盖层，设置position: absolute和opacity: 0，hover时opacity: 1。

媒体查询中网格会依次变为grid-template-columns: repeat(2, 1fr)和grid-template-columns: 1fr;，这部分表现正常，但在max-width: 900px触发前，首列开始缩放，其他两列无变化，所有列布局代码完全一致，恳请提供解决思路。

CSS 代码 #

.home-catalogue-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0.7rem;

        .product {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1 !important;
            padding: 1rem;

            &-info {
                position: absolute;
                width: 100%;
                height: 100%;
                background: $white-transparent;
                color: $darkGray;
                display: flex;
                flex-direction: column;
                text-align: center;
                align-items: center;
                justify-content: center;
                opacity: 0;
                font-size: 2rem;
                font-family: $title-fonts;
                
                a {
                    margin-bottom: 0;
                    color: $darkGray;
                }

                &:hover {
                    opacity: 1;
                }
            }
}

HTML 代码 #

<div class="home-catalogue-grid">
            <div class="product pide-1">
                <div class="product-info">
                    <a href="/pide.html">Pide</a>
                </div>
            </div>
            <div class="product borek-1">
                <div class="product-info">
                    <a href="/borek.html">Börek</a>
                </div>
            </div>
            <div class="product simit-1">
                <div class="product-info">
                    <a href="/simit.html">Simit</a>
                </div>
            </div>
            <div class="product baklava-1">
                <div class="product-info">
                    <a href="/baklava.html">Baklava</a>
                </div>
            </div>
</div>

• 修正盒模型计算规则：给.home-catalogue-grid和.product都加上box-sizing: border-box，确保宽度计算包含内边距和边框，避免padding导致元素实际尺寸超出网格列分配的空间，引发首列挤压。
• 移除aspect-ratio的强制声明：!important会干扰网格的自动布局计算，去掉该声明后，检查aspect-ratio与width:100%是否冲突。同时可将.product的padding移到内部product-info中，避免padding影响网格项的尺寸计算。
• 对比首列与其他列的计算样式：用浏览器开发者工具检查首列元素（如.pide-1）是否被额外的CSS规则命中，比如单独的margin、width或定位属性，导致布局不一致。
• 调整网格列写法：将grid-template-columns: repeat(3,1fr)替换为grid-template-columns: 1fr 1fr 1fr，排查repeat()函数的计算异常问题；同时给网格容器添加grid-auto-flow: row dense，确保网格项自动填充空隙，避免布局错位。
• 校验媒体查询语法：确认max-width:900px的媒体查询是否写成@media (max-width: 900px)，语法错误会导致媒体查询不按时触发，造成首列提前缩放的假象。

内容的提问来源于stack exchange，提问作者TeacherMaik