CSS Grid：如何使区域始终位于另一个区域之上

Question

我希望红色区域始终适合内容，以便下面的区域（评论部分）始终位于后面而不是下面。

在Chrome中，它可以工作，但不适用于Firefox（见图片）。

我认为通过添加.gridAB { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "body" "aside" "comment"; grid-gap: 40px; } @media screen and (min-width: 768px) { .gridAB { grid-template-columns: 2fr 1fr; grid-template-rows: max-content; grid-template-areas: "body aside" "comment aside"; } } .gridAB .aside { grid-area: aside; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-gap: 20px; align-content: flex-start; } .gridAB .body { grid-area: body; background-color: red; } .gridAB .album { background-color: pink; } .gridAB .credit { background-color: green; } .gridAB .version { background-color: yellow; } .gridAB .comment { grid-area: comment; background-color: #eee; }它会使它成为现实，但显然不是。

那么，如何使红色区域始终适合内容，以便评论区域紧随其后。

https://jsfiddle.net/mjb7cehy/

HTML和CSS

＆＃13;

＆＃13;

<div class="gridAB">
  <div class="body">body goes here</div>
  <div class="aside">
    <div class="album">album</div>
    <div class="credit">credits</div>
    <div class="version">version</div>
  </div>
  <div class="comment">comments go here</div>
</div>

＆＃13;

File file = new File("file:///storage/emulated/0/tutorial/1a1cbfc4-18cb-4637-8405-01bf9bebeda3.mp4");
    if (file.exists()) {
        LogUtil.printLogMessage(VideoListActivity.class.getName(), "video File", "file exist");
    } else {
        LogUtil.printLogMessage(VideoListActivity.class.getName(), "video File", "file not exist");
    }

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试

grid-template-rows: 0fr 1fr; 

可行：请找到更新的示例链接：jsfiddle