响应式CSS网格布局,位置:固定

Question

我正在使用CSS网格布局构建一个响应式模板(仍然在学习),感谢你们中的一些人,我已经完成了大部分工作.

• 移动(最大宽度:767px)

  • 一切都应该出现在自己的行上

• 平板电脑(最小宽度:768px)

  • nav在第一行
  • 在第二个和第二个主要

• 桌面(最小宽度:992px)

  • 与平板电脑相同,但水平间距为10%

• xl桌面(最小宽度:1920px)

  • 与桌面相同,但最大宽度为1920px

问题是我正在使用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>

https://jsfiddle.net/90kotz8d/1/

Answer 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>

Answer 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>