使网格区域跨越两行

Question

这是我从未见过的非常奇特的情况。第一张图片是我来自 Adobe XD 的 mock-up，第二张是来自 Google Chrome 的我网站的屏幕截图，显示了浏览器如何解释网格。

如您所见，我有两个导航元素：一个 "sub nav," 提供组织链接；和一个提供站点链接的 "main nav,"。 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 是锚标签。

我创建了一个包含十列和两行的网格。徽标有意放置在其父元素 'header' 之外的 "overflow" 处，将占据整个第一列，其他八列将分成两行，每行都有一个 nav 元素.然而，正如您从网格轮廓中看到的那样，这并没有发生。徽标跨越第一列的一行，与 sub-nav 共享，main-nav 位于徽标下方的第二行。

模型：

Sub-nav 突出显示，显示第一行大小：

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;
    }

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 网格区域：

因为网格区域应用于网格项的子项，所以它是，规则被忽略。将规则移动到父级，网格容器可以看到它。

使网格区域跨越两行

Make a grid area span two rows

html

css

grid-layout

css-grid

解决方案

说明