Отзывчивый макет сетки CSS с положением: фиксированный

Я создаю отзывчивый шаблон с CSS Grid Layout (все еще изучая), и, благодаря нескольким из вас здесь, у меня есть большая часть его работы.

  • мобильный (max-width: 767px)

    • все должно появиться в отдельном ряду

  • таблетка (мин-ширина: 768 пикселей)

    • nav находится в первой строке
    • в стороне и на втором

  • рабочий стол (мин-ширина: 992px)

    • так же, как и таблетка, но с 10% интервалов по горизонтали

  • xl рабочий стол (мин-ширина: 1920 пикселей)

    • то же, что и рабочий стол, но имеет максимальную ширину 1920 пикселей

Дело в том, что я использую тег header чтобы покрасить интервал влево и вправо от nav. Использую ли я заголовок или div, кажется, что у него пустой контейнер, который просто окрашивает пустое пространство. Есть ли способ сделать это таким образом, чтобы я мог применить position: fixed на всей верхней части?

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

header,
nav {
  background: blue;
  color: #fff;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}


/* mobile  */

@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav,
  aside,
  main {
    grid-column: 1 / 1;
    padding: 0 15px;
  }
}


/* tablets */

@media (min-width: 768px) {
  body {
    grid-template-columns: 275px 1fr;
    grid-template-rows: 1fr 1fr;
  }
  nav {
    grid-column: 1 / 4;
    grid-row: 1;
    height: 50px;
    grid-row: 1;
  }
  aside {
    grid-column: 1;
  }
  main {
    grid-column: 2;
  }
  nav,
  aside,
  main {
    padding: 0 15px;
  }
}


/* desktops */

@media (min-width: 992px) {
  body {
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
  }
  header {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  nav {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  aside {
    grid-column: 2 / 3;
  }
  main {
    grid-column: 3 / 4;
  }
}


/* xl desktops */

@media (min-width: 1920px) {
  body {
    grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
<header></header>
<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>

ОТВЕТЫ

Ответ 1

Если я понимаю ваше намерение, вы на самом деле не используете заголовок для интервала, вы действительно используете его, чтобы получить синий фон, чтобы покрыть все пространство.

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

Итак, единственное решение, которое я мог найти, включает использование псевдоэлемента. По крайней мере, это более семантично. Я избавился от медиа-запросов, так как теперь они не играют здесь роли:

* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
}

.container::after {
    content: "";
    background-color: blue;
    grid-column: 1 / 5;
    grid-row: 1;
    z-index: -1;
}

a {
  text-decoration: none;
  color: white;
}


nav {
  background: blue;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}
nav {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  aside {
    grid-column: 2 / 3;
  }
  main {
    grid-column: 3 / 4;
  }
<div class="container">
<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>
</div>

Ответ 2

Наверное, это то, чего ты хочешь. Я использовал grid-column: 1/8; в поле @media (min-width: 992px) и добавлена ручная прокладка с обеих сторон. Надеюсь, без этого решения до сих пор нет больше вариантов, которые у вас есть без использования дополнительных <div>, <header> или любых других контейнеров.

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

header,
nav {
  background: blue;
  color: #fff;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}

/* mobile  */


@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  
  nav,
  aside,
  main {
    grid-column: 1 / 1;
    padding: 0 15px;
  }
}


/* tablets */


@media (min-width: 768px) {
  body {
    grid-template-columns: 275px 1fr;
    grid-template-rows: 1fr 1fr;
  }
  
  nav {
    grid-column: 1 / 4;
    grid-row: 1;
    height: 50px;
    grid-row: 1;
  }
  
  aside {
    grid-column: 1;
  }
  
  main {
    grid-column: 2;
  }
  
  nav,
  aside,
  main {
    padding: 0 15px;
  }
}


/* desktops */


@media (min-width: 992px) {
  body {
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
  }
  
  nav {
    grid-column: 1 / 8;
    grid-row: 1;
    padding-right: 11.3vw;
    padding-left: 11.3vw;
  }
  
  aside {
    grid-column: 2 / 3;
  }
  
  main {
    grid-column: 3 / 4;
  }
}


/* xl desktops */


@media (min-width: 1920px) {
  body {
    grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>

Ответ 3

Из того, что я вижу, вам может потребоваться добавить правило, говорящее, что это display: block; прежде чем вы сможете добавить position: fixed правило, потому что я уверен, что <header> являются встроенными элементами.

Вы также можете попробовать и добавить медиа-запросы, ссылаясь на разные таблицы стилей, отображающие разные таблицы, используя display: tableRow; , tableCell и значения table.

Надеюсь, это сработает