web-dev-qa-db-ja.com

CSSグリッドセルの高さが異なる

「コンテンツ」と「正しい」ブロックをレスポンシブに上に移動するにはどうすればよいですか？問題は、サブネストされたグリッドを使用できないことです。ハックは必要ありません。ヘッダーの高さが異なる可能性があるため、マージントップはありません。 JavaScriptはありません。純粋なCSSのみ。可能であれば。

enter image description here

マークアップは次のようになります。

.wrapper {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas:
          "aside header header"
          "left content right";
  grid-gap: 15px;
}

.header, .aside, .left, .content, .right {
  border: 1px solid black;
  padding: 10px;
}

.header {
  grid-area: header;
  height: 30px; /* in real case it's responsive height */
}

.aside {
  grid-area: aside;
  height: 80px; /* in real case it's responsive height */
}

.left {
  grid-area: left;
}

.content {
  grid-area: content;
  background: yellow;
}

.right {
  grid-area: right;
  background: yellow;
}

.left, .content, .right {
  height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
   <!-- this order should be on mobile -->
   <header class="header">header</header>
   <aside class="aside">aside</aside>
   <div class="left">left</div>
   <div class="content">content</div>
   <div class="right">right</div>
</div>
htmlcsscss-grid
13
Lukas Pierce

解決策（CSSのみを使用）は、grid-template-areas:に別の行を追加することです

.wrapper {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas:
          "aside header header"
          "aside content right"
          "left content right";
  grid-gap: 15px;

}

.header, .aside, .left, .content, .right {
  border: 1px solid black;
  padding: 10px;
}

.header {
  grid-area: header;
  height:30px; /* in real case it's responsive height */
}

.aside {
  grid-area: aside;
  height: 80px; /* in real case it's responsive height */
}

.left {
  grid-area: left;
}

.content {
  grid-area: content;
  background: yellow;

}

.right {
  grid-area: right;
  background: yellow;
}

.left, .content, .right {
  height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
   <!-- this order should be on mobile -->
   <header class="header">header</header>
   <aside class="aside">aside</aside>
   <div class="left">left</div>
   <div class="content">content</div>
   <div class="right">right</div>
</div>
5
Nick

このようなもの（マージントップ）を使用して、コンテンツをヘッダーのすぐ近くに移動できます。これによりモバイルのビューが変更されて乱雑になる場合は、デバイスに応じて2つのビューを作成し、デバイスごとに異なるcss値を使用する必要があります。

.wrapper {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas:
          "aside header header"
          "left content right";
  grid-gap: 15px;
}

.header, .aside, .left, .content, .right {
  border: 1px solid black;
  padding: 10px;
}

.header {
  grid-area: header;
  height: 30px; /* in real case it's responsive height */
}

.aside {
  grid-area: aside;
  height: 80px; /* in real case it's responsive height */
}

.left {
  grid-area: left;
}

.content {
  grid-area: content;
  background: yellow;
  margin-top: -50px;
}

.right {
  grid-area: right;
  background: yellow;
  margin-top: -50px;
}

.left, .content, .right {
  height: 100px; /* in real case it's responsive height */
}
<div class="wrapper">
   <!-- this order should be on mobile -->
   <header class="header">header</header>
   <aside class="aside">aside</aside>
   <div class="left">left</div>
   <div class="content">content</div>
   <div class="right">right</div>
</div>
1
Dragomir Kolev