我正在创建一个带有 CSS 网格布局的 vijesti.html 页面，用于显示三种类型的新闻项目：
主要新闻 (.mainNews) 覆盖整个宽度。在宽度超过 800 像素的屏幕上，其纵横比应为 1:2，在较小的屏幕上应为 1:1。
垂直新闻 (.verticalNews) 在宽度超过 800 像素的屏幕上为 25% 宽度，在较小的屏幕上为 50%，并且其高度始终是宽度的两倍。
Square News (.squareNews) 具有相同的宽度和高度，在大屏幕上占据 25% 的宽度，在小屏幕上占据 50% 的宽度。
我尝试使用 grid-template-areas 来实现此目的，但收到“无效的属性值”错误。如何为此布局正确设置网格模板区域，或者是否有更好的方法？
这是我为其编写的代码：
<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>
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 文档的 mdn：“除非这些单元格形成矩形，否则声明无效”。
例如，您可以将区域更改为： 网格模板区域：
"main main main main"
"vertical square square vertical3"
"vertical square square vertical3"
"square2 square2 vertical2 vertical3"
"square2 square2 vertical2 vertical3";
当然，您必须根据您希望布局的工作方式确定区域名称并使用。