Сделать область сетки на два ряда - PullRequest
Новая
       15

Сделать область сетки на два ряда

0 голосов
/ 01 декабря 2018

Это очень специфическая ситуация, которую я никогда раньше не видел.Первое изображение - мой макет из Adobe XD, а второе - скриншот моего сайта из Google Chrome, на котором показано, как браузер интерпретирует сетку.

Как видите, у меня есть дваэлементы nav: «sub nav», который обеспечивает организационные связи;и "главная навигация", которая предоставляет ссылки на сайт.Далее следует соглашение об именовании CSS-идентификаторов / классов:

# header__main-nav и # header__sub-nav - элементы HTML nav; # main-nav__container и # sub-nav__container - это элементы HTML ul;.main-nav__item и .sub-nav__item являются элементами li;и .main-nav__link и .sub-nav__link являются тегами привязки.

Я создал сетку из десяти столбцов и двух строк.Логотип, который намеренно помещается так, чтобы «переполняться» из его родительского элемента header, должен занимать весь первый столбец, а остальные восемь столбцов должны быть разбиты на две строки, каждая с элементом nav.Однако, как вы можете видеть из сетки, этого не происходит.Логотип охватывает одну строку первого столбца, разделяя его с суб-навигацией, а главная-навигация находится во втором ряду под логотипом.

Макет:

Mockup

Подсвеченная суб-навигация, показывающая размер первой строки:

Sub-nav highlighted, showing first row size

Подсвеченная основная навигация, показывающая размер второй строки и исключающая "grid-area: logo":

Main-nav highlighted, showing second row size and excluding

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

1 Ответ

0 голосов
/ 01 декабря 2018

Решение

Вам необходимо переместить grid-area: logo из img#header__logo в a родителя.

Объяснение

У вас неправильное представление о том, какСетка работает или ошибка кодирования, в зависимости от того, как вы ее видите.

Это ваша сетка HTML:

enter image description here

Естьчетыре элемента сетки.

Вот 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;
}

Однако отсутствует область сетки вашего логотипа .

enter image description here

На самом деле вы определили сетку logoобласть на дочернем элементе сетки:

enter image description here

Поскольку область сетки применяется к дочернему элементу элемента сетки, она равна выходит за рамки и правило игнорируется.Переместите правило в родительский объект, где его можно увидеть в сеточном контейнере.

...