如何使用网格模板区域跨越多个网格项目的图像？答案

【问题标题】：How to span an image across multiple grid items using grid-template-areas?如何使用网格模板区域跨越多个网格项目的图像？
【发布时间】：2019-01-20 12:16:12
【问题描述】：

我目前正在为我的网站设置网格，该网格应该在特定网格单元格中保存不同大小的内容，但我无法弄清楚如何在不弄乱页面的情况下使图像跨越多个网格单元格。

由于我之前在 html 中手动放置项目的方法没有响应，我不得不重新设计我设置网站的方式。我尝试添加类似于 class="threebythree" 的类，然后在 css 中为该类指定最小宽度和最小高度。不知何故，即使没有使用类，也会在网格中添加额外的列。

<div class="gridcontainer">
    <div class="grid grid1 header">
        <img src="images/headergraphic.svg" alt="Header graphic" class="title">
    </div>
    <div class="grid grid2"></div>
    <div class="grid grid3"></div>
    <div class="grid grid4"></div>
    <div class="grid grid5"></div>
    <div class="grid grid6"></div>
    <div class="grid grid7"></div>
    <div class="grid grid8"></div>
    <div class="grid grid9"></div>
</div>


.gridcontainer {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-column-gap: 1px;
    grid-auto-flow: row;
    position: relative;
    top: 0;
    width: 90vw;
    height: 100%;
    margin: auto;
    overflow: hidden;
    max-width: 1800px;
    background-color: transparent;
    z-index: 6;
    grid-template-areas: 
        "head head head . . ."
        "head head head . . ."
        "head head head . . ."
        ;
}
.grid {
    position: relative;
    /* Limits the size of the grid and resizes based on viewport size */
    height: calc(90vw / 6);
    max-height: 300px;
    width: calc(90vw / 6);
    max-width: 300px;
    background-color: transparent;
    z-index: 100;
    left: 1px;
}
.header {
    grid-area: head;
    background-color: blue;
}
.title {
    grid-area: 1 / 1 / 3 / 3;
}

我希望标题图形（或至少是背景颜色）跨越 6 列网格的 3x3 空间，但它仅限于第一个网格单元格。这是我目前的结果，我的预期和最终布局的想法：https://imgur.com/a/7b8tDWt

【问题讨论】：

标签： html css css-grid

【解决方案1】：

这是由于您应用于grid 项目的宽度/高度限制。您可以使用 not() 在标题上避免这种情况，或者直接删除 grid 类。

.gridcontainer {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-column-gap: 1px;
    grid-auto-flow: row;
    position: relative;
    top: 0;
    width: 90vw;
    height: 100%;
    margin: auto;
    overflow: hidden;
    max-width: 1800px;
    background-color: transparent;
    z-index: 6;
    grid-template-areas: 
        "head head head . . ."
        "head head head . . ."
        "head head head . . ."
        ;
}
.grid:not(.header) {
    position: relative;
    /* Limits the size of the grid and resizes based on viewport size */
    height: calc(90vw / 6);
    max-height: 300px;
    width: calc(90vw / 6);
    max-width: 300px;
    background-color: transparent;
    z-index: 100;
    left: 1px;
    box-shadow:0 0 2px #000 inset;
}
.header {
    grid-area: head;
    background-color: blue;
}
.title {
    grid-area: 1 / 1 / 3 / 3;
}

<div class="gridcontainer">
    <div class="grid grid1 header">
        <img src="images/headergraphic.svg" alt="Header graphic" class="title">
    </div>
    <div class="grid grid2"></div>
    <div class="grid grid3"></div>
    <div class="grid grid4"></div>
    <div class="grid grid5"></div>
    <div class="grid grid6"></div>
    <div class="grid grid7"></div>
    <div class="grid grid8"></div>
    <div class="grid grid9"></div>
</div>

【讨论】：