html - 使网格区域跨越两行

Question

这是我以前从未见过的非常奇特的情况。第一张图片是我在 Adob​​e XD 中的模型，第二张是我的 Google Chrome 网站的屏幕截图，它显示了浏览器是如何解释网格的。

如您所见，我有两个导航元素：一个“子导航”，它提供组织链接；以及提供站点链接的“主导航”。CSS id/class 命名约定如下：

#header__main-nav和 #header__sub-nav 是导航 HTML 元素； #main-nav__container和 #sub-nav__container 是 ul HTML 元素；.main-nav__item 和 .sub-nav__item 是 li 元素；并且 .main-nav__link 和 .sub-nav__link 是锚标签。

我创建了一个十列两行的网格。有意放置的徽标从其父“标题”元素“溢出”，将占据整个第一列，其他八列将分为两行，每行都有一个导航元素。但是，正如您从网格轮廓中看到的那样，这并没有发生。徽标跨越第一列的一行，与子导航共享，主导航位于徽标下方的第二行。

小样：

子导航突出显示，显示第一行大小：

Main-nav 突出显示，显示第二行大小，不包括“grid-area: logo”：

CSS：

@media only screen and (min-width: 1101px) {

    /* Mobile-specific style for floating elements left */
    .mobile-only-style {
        float: left;
    }

    /* Grid/Float Declarations */
    #grid__main {
        margin: 0;
        padding: 2vw;
    }

    body {
        font-size: calc(1.5vw + 0.5em);
    }

    #grid__wrapper {
        width: 100vw;
        display: flex;
        flex-flow: column wrap;
    }

    /* Header Styles */
    header#grid__header {
        height: 9vw;
        z-index: 1;
        margin: 0;
        display: grid;
        grid-template-columns: (10, 1fr);
        grid-template-rows: (2, 1fr);
        grid-template-areas:
            "logo logo . . . sub-nav sub-nav sub-nav sub-nav sub-nav"
            "logo logo . . main-nav main-nav main-nav main-nav main-nav main-nav"
    }

    img#header__logo {
        grid-area: logo;
        width: 15vw;
        height: auto;
        margin: 1em 0 0 1em;
        padding: 0;
    }

    /* Navigation Styles */

    /* Main Nav */
    nav#header__main-nav {
        grid-area: main-nav;
        width: calc(75vw - 1em);
        height: 50%;
    }

    ul#main-nav__container {
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        margin: 0;
    }

    li.main-nav__item {
        height: 50%;
    }

    li a.main-nav__link {
        text-decoration: none;
        font-size: calc(.8vw + 0.6em);
        font-family: atrament-web, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-variant-caps: all-petite-caps;
        color: white;
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline;
        -webkit-text-decoration-color: var(--brand-color);
        text-decoration-color: var(--brand-color);
        -webkit-transition: all 1s;
        transition: all 1s;
    }

    li a#main-nav__link-active {
        color: white;
        font-size: scale(1.2);
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
        -webkit-text-decoration-color: none;
        text-decoration-color: none;
    }

    /* Sub-nav */

    nav#header__sub-nav {
        grid-area: sub-nav;
        height: auto;
        width: calc(75vw - 1em);
        height: 25%;
    }

    ul#sub-nav__container {
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        margin: 0;
    }

    li.sub-nav__item {
        height: 25%;
    }

    li a.sub-nav__link {
        text-decoration: none;
        font-size: calc(.5vw + 0.3em);
        font-family: atrament-web, sans-serif;
        font-weight: 700;
        color: white;
        -webkit-transition: all 1s;
        transition: all 1s;
    }

    li a#sub-nav__link-active {
        color: white;
        font-size: scale(1.2);
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
        -webkit-text-decoration-color: none;
        text-decoration-color: none;
    }
[...]
}

我尝试更具体地说明我的列大小并添加第三行，该行仅由第一列中的徽标占据。结果相同——没有变化。

@media only screen and (min-width: 1101px) {

    /* Mobile-specific style for floating elements left */
    .mobile-only-style {
        float: left;
    }

    /* Grid/Float Declarations */
    #grid__main {
        margin: 0;
        padding: 2vw;
    }

    body {
        font-size: calc(1.5vw + 0.5em);
    }

    #grid__wrapper {
        width: 100vw;
        display: flex;
        flex-flow: column wrap;
    }

    /* Header Styles */
    header#grid__header {
        height: 9vw;
        z-index: 1;
        margin: 0;
        display: grid;
        grid-template-columns: 2fr, 1fr, 6fr, 1fr;
        grid-template-rows: (3, 1fr);
        grid-template-areas:
            "logo . sub-nav ."
            "logo main-nav main-nav main-nav"
            "logo . . ."
    }

    img#header__logo {
        grid-area: logo;
        width: 15vw;
        height: auto;
        margin: 1em 0 0 1em;
        padding: 0;
    }

    /* Navigation Styles */

    /* Main Nav */
    nav#header__main-nav {
        grid-area: main-nav;
        width: calc(75vw - 1em);
        height: 50%;
    }

    ul#main-nav__container {
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        margin: 0;
    }

    li.main-nav__item {
        height: 50%;
    }

    li a.main-nav__link {
        text-decoration: none;
        font-size: calc(.8vw + 0.6em);
        font-family: atrament-web, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-variant-caps: all-petite-caps;
        color: white;
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline;
        -webkit-text-decoration-color: var(--brand-color);
        text-decoration-color: var(--brand-color);
        -webkit-transition: all 1s;
        transition: all 1s;
    }

    li a#main-nav__link-active {
        color: white;
        font-size: scale(1.2);
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
        -webkit-text-decoration-color: none;
        text-decoration-color: none;
    }

    /* Sub-nav */

    nav#header__sub-nav {
        grid-area: sub-nav;
        height: auto;
        width: calc(75vw - 1em);
        height: 25%;
    }

    ul#sub-nav__container {
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        margin: 0;
    }

    li.sub-nav__item {
        height: 25%;
    }

    li a.sub-nav__link {
        text-decoration: none;
        font-size: calc(.5vw + 0.3em);
        font-family: atrament-web, sans-serif;
        font-weight: 700;
        color: white;
        -webkit-transition: all 1s;
        transition: all 1s;
    }

    li a#sub-nav__link-active {
        color: white;
        font-size: scale(1.2);
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
        -webkit-text-decoration-color: none;
        text-decoration-color: none;
    }

标签： htmlcssgrid-layoutcss-grid

Answer 1

解决方案

您需要grid-area: logo从父级img#header__logo移动。a

---

解释

您对 Grid 的工作方式或编码错误有误解，这取决于您如何看待它。

这是您的网格 HTML：

有四个网格项目。

这是容器的 CSS：

header#grid__header {
    height: 9vw;
    z-index: 1;
    margin: 0;
    display: grid;
    grid-template-columns: calc(15vw + 1em) 9fr;
    grid-template-rows: 1fr 2fr;
    grid-template-areas: "logo sub-nav" 
                         "logo main-nav";
}

看起来不错。徽标设置为跨两行。

sub-nav网格区域定义正确：

nav#header__sub-nav {
    grid-area: sub-nav;
    height: auto;
    width: calc(75vw - 1em);
    height: auto;
    margin: 0;
}

main-nav网格区域定义正确：

nav#header__main-nav {
    grid-area: main-nav;
    width: calc(75vw - 1em);
    height: auto;
}

但是，您的徽标网格区域丢失了。

实际上，您已经logo在网格项的子项上定义了网格区域：

由于网格区域应用于网格项的子项，因此超出范围并忽略规则。将规则移动到父级，网格容器可以看到它。