如何在css中给grid 2列而不是1列

Question

我在我的项目中使用了 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;
  }

这是我的布局

我希望显示日历的网格只是一个跨 2 行的网格。抱歉，我知道这是一个愚蠢的问题，但我不太擅长造型

Answer 1

您可以通过在父级上定义 grid-template-areas 并使用 grid-area 将特定的 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>

CSS Tricks 快速概述了在模板区域中使用 css 网格。 https://css-tricks.com/snippets/css/complete-guide-grid/#grid-template-areas