Question

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

由于我以前在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

Answer 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>

如何使用网格模板区域将图像跨多个网格项目？

1 个答案: