Grid Layout在Safari无法显示多列，其他浏览器表现正常

问题背景 #

当前布局在Safari浏览器中仅能显示单列，段落和图片撑满页面宽度；切换为flex布局虽能显示多列，但完全破坏了原有的响应式设计。核心CSS代码如下：

.grid {
    display: grid;
    margin: 2rem;
    grid-template-columns: 100%;

    @media screen and (min-width: 1000px) {
        grid-template-columns: 50% 50%;
    }
}

.feature-letter {
    font-family: "Work Sans", sans-serif;
    line-height: 1;
    font-weight: 900;

    font-size: calc(
        100px + (550 - 100) * ((100vw - 320px) / (1000 - 320))
    ); /* 550px; */
    margin: 0;
    background-image: url(https://images.unsplash.com/photo-1543871673-fb355dc4e349?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
    background-size: cover;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    float: left;
    shape-margin: 0.5rem;
    shape-outside: polygon(
        6.13% 18.73%,
        5.97% 84.82%,
        39.05% 84.64%,
        43.15% 60.82%,
        66.73% 83.73%,
        101.49% 83.64%,
        79.49% 59.81%,
        89.11% 54.91%,
        94.27% 48.09%,
        96.59% 36.55%,
        91.11% 25%,
        74.52% 19.27%
    );
}

.feature-intro {
    font-family: "Playfair Display", serif;
    font-size: 0.85rem;
    letter-spacing: 0.052rem;
    font-feature-settings: "liga" 1;  
    font-variant-ligatures: common-ligatures;

    &.start {
        margin-top: 1rem;
        line-height: 1.4;

        &::first-letter {
            font-size: 28px;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            padding: 0 0 0 5px;
        }
    }
}

.nestedGrid {
    font-family: "Playfair Display", serif;
    font-size: 0.65rem;
    letter-spacing: 0.052rem;
    margin: 1rem;
    grid-gap: 1.25rem;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
        "text1"
        "text2"
        "text3";

    @media screen and (min-width: 400px) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "text1 text2"
            "text1 text2"
            "text3 text3";
    }

    @media screen and (min-width: 1000px) {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "text1 text2 text3"
            "text1 text2 ."
            ". . .";
    }

    img {
        width: 100%;
    }
}

.image1 {
    grid-area: image1;
}

.image2 {
    grid-area: image2;
}

.text1 {
    grid-area: text1;
    align-items: start;
}

.text2 {
    grid-area: text2;
}

.text3 {
    grid-area: text3;
}

/* Text */
h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-style: italic;
    transform: translateX(-0.5rem);
}

p + img,
img + h2 {
    margin-top: 0.5rem;
}

修复方案 #

针对Safari对Grid布局的兼容性问题，可通过以下几点调整解决：

1. 添加WebKit前缀并优化列定义语法
   Safari对grid-template-columns的百分比写法兼容性不如repeat()函数，同时添加前缀确保旧版本Safari识别Grid布局：

   .grid {
       display: -webkit-grid;
       display: grid;
       margin: 2rem;
       grid-template-columns: 100%;
       -webkit-grid-template-columns: 100%;
   
       @media screen and (min-width: 1000px) {
           grid-template-columns: repeat(2, 1fr);
           -webkit-grid-template-columns: repeat(2, 1fr);
       }
   }
   

2. 修复嵌套Grid的前缀与语法
   对嵌套Grid做同样的前缀补充，统一使用repeat()函数定义列：

   .nestedGrid {
       font-family: "Playfair Display", serif;
       font-size: 0.65rem;
       letter-spacing: 0.052rem;
       margin: 1rem;
       grid-gap: 1.25rem;
       display: -webkit-grid;
       display: grid;
       grid-template-rows: auto;
       grid-template-columns: 1fr;
       -webkit-grid-template-columns: 1fr;
       grid-template-areas:
           "text1"
           "text2"
           "text3";
   
       @media screen and (min-width: 400px) {
           grid-template-columns: repeat(2, 1fr);
           -webkit-grid-template-columns: repeat(2, 1fr);
           grid-template-areas:
               "text1 text2"
               "text1 text2"
               "text3 text3";
       }
   
       @media screen and (min-width: 1000px) {
           grid-template-columns: repeat(3, 1fr);
           -webkit-grid-template-columns: repeat(3, 1fr);
           grid-template-areas:
               "text1 text2 text3"
               "text1 text2 ."
               ". . .";
       }
   
       img {
           width: 100%;
       }
   }
   

3. 清除浮动对Grid布局的干扰
   .feature-letter的float: left可能导致Safari的Grid布局计算异常，给Grid容器添加overflow: hidden清除浮动影响：

   .grid {
       display: -webkit-grid;
       display: grid;
       margin: 2rem;
       grid-template-columns: 100%;
       -webkit-grid-template-columns: 100%;
       overflow: hidden; /* 清除浮动干扰 */
   
       /* 媒体查询部分不变 */
   }
   

说明 #

以上调整既解决了Safari中Grid多列不生效的问题，又完整保留了原有的响应式设计逻辑。核心是利用更兼容的Grid语法、补充浏览器前缀，以及消除浮动对Grid布局的干扰。

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