CSS Порядок сетки при различной ширине @media - PullRequest
Новая
       25

CSS Порядок сетки при различной ширине @media

2 голосов
/ 19 марта 2020

Мой первый пост. Я видел, что есть несколько похожих вопросов, но ни один из них, кажется, не имеет ответа, который я ищу (если вообще).

У меня есть простая решетка из 4 строк и 1 столбца.

  • На экранах размером менее 768 пикселей я хочу, чтобы порядок строк был: Меню, Верхний колонтитул, Главный, Нижний колонтитул
  • На экранах большего размера я хочу, чтобы порядок строк был: Верхний колонтитул, Меню, Главный нижний колонтитул
  • (в основном, переключение Меню и Заголовка на разных устройствах)

Цвета изменяются при изменении размера (назначаются соответствующей сетке (ie. Изменяется заголовок) от бирюзового до бледно-фиолетового)), но порядка строк нет. 

@media only screen and (max-width: 767px) {
    body {
        display: grid;
        grid-template-areas:
            'menu'
            'header'
            'main'
            'footer'
            ;
    }

    .gridMenu {
        background: lightcoral;
    }
    .gridHeader {
        background: turquoise;
    }
    .gridMain {
        background: lightsalmon;
    }
    .gridFooter {
        background: pink;
    }
}

/* Tablet - Portrait */
@media only screen and (min-width: 768px) {
    /* Grid */

    body {
        display: grid;
        grid-template-areas:
            'header'
            'menu'
            'main'
            'footer'
            ;
    }

    .gridMenu {
        background: palegreen;
    }
    .gridHeader {
        background: palevioletred;
    }
    .gridMain {
        background: lightskyblue;
    }
    .gridFooter {
        background: cornflowerblue;
    }
}
<body>
    <div class="gridMenu">
        Menu Here
    </div>
    <div class="gridHeader">
        Header Here
    </div>
    <div class="gridMain">
        Main Here
    </div>
    <div class="gridFooter">
        Footer Here
    </div>
</body>

Буду признателен за любой совет.

Спасибо.

1 Ответ

2 голосов
/ 19 марта 2020

Ошибка: Вы просто не смогли объявить grid-area, пусть CSS знает, какой div и куда поместить. Также удалите нежелательный @media запрос и дублируйте CSS свойства.

Вот ваши исправленные CSS

body {
  display: grid;
  grid-template-areas:
    'menu'
    'header'
    'main'
    'footer'
  ;
}

.gridMenu {
  grid-area: menu;
  background: lightcoral;
}

.gridHeader {
  grid-area: header;
  background: turquoise;
}

.gridMain {
  grid-area: main;
  background: lightsalmon;
}

.gridFooter {
  grid-area: footer;
  background: pink;
}


/* Tablet - Portrait */
@media only screen and (min-width: 768px) {
  /* Grid */
  /* Add only the things you wish to modify */

  body {
    grid-template-areas:
      'header'
      'menu'
      'main'
      'footer'
    ;
  }

  .gridMenu {
    background: palegreen;
  }

  .gridHeader {
    background: palevioletred;
  }

  .gridMain {
    background: lightskyblue;
  }

  .gridFooter {
    background: cornflowerblue;
  }
}
...