web-dev-qa-db-ja.com

位置のあるレスポンシブCSSグリッドレイアウト：修正済み

私はCSSグリッドレイアウトを使用してレスポンシブテンプレートを作成しています（まだ学習中です）。ここにいる何人かの皆さんのおかげで、ほとんどが機能しています。

  • モバイル（最大幅：767px）

    • すべてが独自の行に表示されます

  • タブレット（最小幅：768px）

    • navは最初の行にあります
    • 脇と2番目のメイン

  • デスクトップ（最小幅：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/

htmlcsswebpagecss-grid
14
totalnoob

私があなたの意図を理解しているなら、あなたは実際には間隔にヘッダーを使用していません、あなたは実際にそれを使用して青い背景がすべてのスペースをカバーするようにしています。

ロゴとログインも境界に垂直に揃えたいと思われるので、ナビゲーションでこれを行うための可能な解決策はないと思います。

したがって、私が見つけた唯一の解決策は、疑似要素を使用することです。少なくともこれはより意味論的です。メディアクエリはここでは役割を果たさないので、削除しました。

* {
  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>
6
vals

私は、これはあなたが望むものだと思います。 @media (min-width: 992px)でgrid-column: 1 / 8;を使用し、両側に手動のパディングを追加しました。このソリューションがなければ、これまで、追加の<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>
5
Rakibul Islam

display: block;sはインライン要素であると確信しているため、position: fixedルールを追加する前に、<header>であるというルールを追加する必要があるかもしれません。

display: tableRow;、tableCell、およびtableの値を使用して、さまざまなテーブルを表示するさまざまなスタイルシートにリンクするメディアクエリを追加することもできます。

これがうまくいくことを願っています

4
Jack Bashford