如何在css中为网格指定2列而不是1列

我正在为我的项目使用css网格

我有这个页面的css

.App {
    text-align: center;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    height: 100vh;
  }
  
  .grid-item {
    background-color: rgba(0, 0, 0, 0.8);
    border: 0.5px dotted rgba(255, 255, 255, 0.8);
    padding: 20px;
    color: white;
    text-align: center;
  }

这是我的布局

---

我希望日历显示的网格仅为一个网格，两行跨度。抱歉，我知道这是一个愚蠢的问题，但我不太擅长设置样式

您可以通过在父级上定义网格模板区域并使用网格区域将特定div放置在所需区域来实现

.app {
    text-align: center;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    height: 100vh;

    /* Naming the grid areas */
    grid-template-areas: 
    "weather clock spotify"
    "calendar mic number"
    "calendar message feed";
}

.grid-item {
    background-color: rgba(0, 0, 0, 0.8);
    border: 0.5px dotted rgba(255, 255, 255, 0.8);
    padding: 20px;
    color: white;
    text-align: center;
}

/* Instead if using nth-of-type you should add a custom class to the specific html element if it's possible. */
.app > div:nth-of-type(4) {
    background-color: red;

    /* Place the element in the desired area. */
    grid-area: calendar;
}

您没有包含HTML结构。但我想它会像这样

<div class="app">
    <div class="grid-item">
        city weather
    </div>
    <div class="grid-item">
        Clock
    </div>
    <div class="grid-item">
        Spotify
    </div>
    <div class="grid-item">
        Calendar
    </div>
    <div class="grid-item">
        Mic
    </div>
    <div class="grid-item">
        Some number
    </div>
    <div class="grid-item">
        Message
    </div>
    <div class="grid-item">
        Text feed
    </div>
</div>

城市天气
钟
Spotify
历法
麦克风
一些数字
消息
文本提要

---

CSS技巧快速概述了如何使用CSS网格和模板区域

我想您需要的是

网格行：span 2