不同高度的CSS网格单元 [英] Different height of CSS grid cells

问题描述

如何提高响应的内容和正确块？问题是我不能使用子嵌套网格。我不需要技巧：没有页眉，因为标头可以是不同的高度。没有JavaScript。仅纯CSS。

How can I move up the "content" and the "right" block responsive? The problem is I can't use sub nested grid. I don't need hacks: no margin-top because header can be a different height. No javascript. Only pure CSS. If at all possible.

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

Now my markup looks like this:

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

推荐答案

一种解决方案（仅使用CSS）是在 grid-template-areas中添加另一行：

A solution (using CSS only) is by adding another row to your 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>

这篇关于不同高度的CSS网格单元的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！