Question

这是我从未见过的非常特殊的情况。第一张图片是我从Adobe XD制作的模型，第二张图片是我的Google Chrome浏览器的网站的屏幕截图，显示了浏览器如何解释网格。

如您所见，我有两个导航元素：“ sub 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”元素中“溢出”，占据了整个第一列，而其他八列则被分为两行，每行都有一个nav元素。但是，从网格轮廓中可以看到，这没有发生。徽标跨越第一列的一行，与sub-nav共享，而main-nav位于徽标下方的第二行。

模型：

Mockup

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

Sub-nav highlighted, showing first row size

主导航突出显示，显示第二行大小，但不包括“网格区域：徽标”：

Main-nav highlighted, showing second row size and excluding "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网格区域：

由于将网格区域应用于网格项目的子项，因此它是out of scope，因此该规则将被忽略。将规则移到父规则，网格容器可以在其中看到规则。

使网格区域跨越两行

1 个答案:

解决方案

说明