使用grid-template-areas遇无效属性值错误，如何实现新闻布局？

问题背景 #

正在创建vijesti.html页面，需用CSS Grid展示三类新闻内容，布局要求：

• Main News（.mainNews）：占满宽度；大屏（>800px）宽高比1:2，小屏（<800px）宽高比1:1
• Vertical News（.verticalNews）：大屏占25%宽度，小屏占50%宽度；高度始终为宽度的2倍
• Square News（.squareNews）：宽高相等；大屏占25%宽度，小屏占50%宽度

尝试用grid-template-areas实现时出现「Invalid property value」错误，现有代码如下：

HTML代码 #

<body>
    <div class="news">
        <div class="mainNews">Vijest</div>
        <div class="verticalNews">Vijest</div>
        <div class="squareNews">Vijest</div>
        <div class="squareNews">Vijest</div>
        <div class="squareNews">Vijest</div>
        <div class="squareNews">Vijest</div>
        <div class="verticalNews">Vijest</div>
        <div class="squareNews">Vijest</div>
        <div class="squareNews">Vijest</div>
        <div class="squareNews">Vijest</div>
        <div class="squareNews">Vijest</div>
        <div class="verticalNews">Vijest</div>
        <div class="verticalNews">Vijest</div>
    </div>
</body>

初始CSS代码 #

body {
    background-color: #cdc3a9;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.news {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas: 
    "main main main main"
    "vertical square square vertical"
    "vertical square square vertical"
    "square square vertical vertical"
    "square square vertical vertical"
}

.mainNews {
    grid-area: main;
    background-color: #c9daf8;
}

.verticalNews {
    grid-area: vertical;
    background-color: #fff2cc;
}

.squareNews {
    grid-area:square;
    background-color: #f4cccc;
}

错误原因 #

grid-template-areas要求同一命名的网格区域必须是连续的矩形块，你写的"vertical square square vertical"中，vertical在同一行的两端属于分散区域，不符合规则，因此浏览器判定为无效值。

解决方案 #

推荐使用无grid-template-areas的灵活实现方案，代码更简洁易维护，同时满足布局要求：

优化后CSS代码 #

body {
    background-color: #cdc3a9;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.news {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
}

/* 主新闻 */
.mainNews {
    grid-column: 1 / -1; /* 占满所有列 */
    aspect-ratio: 1 / 2; /* 大屏宽高比1:2 */
    background-color: #c9daf8;
}

/* 竖版新闻 */
.verticalNews {
    aspect-ratio: 1 / 2; /* 高度为宽度的2倍 */
    background-color: #fff2cc;
}
/* 指定竖版新闻的行跨度 */
.verticalNews:nth-child(2) { grid-row: span 2; }
.verticalNews:nth-child(7) { grid-row: span 2; }
.verticalNews:nth-child(12),
.verticalNews:nth-child(13) { grid-row: span 2; }

/* 方形新闻 */
.squareNews {
    aspect-ratio: 1 / 1; /* 宽高相等 */
    background-color: #f4cccc;
}

/* 小屏响应式适配 */
@media (max-width: 800px) {
    .news {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mainNews {
        aspect-ratio: 1 / 1; /* 小屏宽高比1:1 */
    }
}

方案说明 #

1. grid-column: 1 / -1：让主新闻自动占满当前网格的所有列，适配大屏4列、小屏2列的布局
2. aspect-ratio：直接控制元素宽高比，替代固定宽高，适配不同屏幕尺寸
3. grid-row: span 2：让指定的竖版新闻占据2行，满足高度为宽度2倍的要求
4. 媒体查询：切换小屏模式下的网格列数和主新闻宽高比，实现响应式布局

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