CSS网格单元的高度不同

Question

如何提升＆＃34;内容＆＃34;和'＃34;对＆＃34;阻止响应？问题是我不能使用子嵌套网格。我不需要hacks：没有margin-top因为header可以是不同的高度。没有javascript。只有纯CSS。如果可能的话。

现在我的标记看起来像这样：

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

解决方案（仅限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>

Answer 2

你可以使用这种东西（margin-top）移动内容并靠近标题。如果这会改变移动设备上的视图并使其变得混乱，则需要根据设备创建2个视图，并为不同的设备使用不同的css值。

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

检查

    .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;
      float: left;
    }

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

    .left, .content, .right {
      height: 100px; /* in real case it's responsive height */
    }

    <div class="wrapper">
       <!-- this order should be on mobile -->
       <div id="left-side">
         <aside class="aside">aside</aside>
         <div class="left">left</div>
       </div>

       <div id="right-side">
         <header class="header">header</header>

         <div id="right-side2">
           <div class="content">content</div>
           <div class="right">right</div>
         </div>
       </div>
    </div>