在 CSS 网格布局中切换行进出答案

【问题标题】：Toggling rows in and out in CSS Grid Layout在 CSS 网格布局中切换行进出
【发布时间】：2023-03-28 15:53:02
【问题描述】：

我有以下带有 2 个页眉和 3 个页脚的布局：

.my-grid {
    display: grid;
    grid-template-areas:
        "header1"
        "header2"
        "mainAreaExpandMePlease"
        "footer1"
        "footer2"
        "footer3"
        ;
    grid-template-rows: 27px 27px 1fr 28px 28px 28px;
    height: 100%;
}

主要区域将扩大以填补显示页眉和页脚后留下的空白。

我希望能够打开和关闭页脚（显示/隐藏它们），以便它们折叠。使用上面的代码，当我们隐藏页脚时，会留下一个空白。

我该怎么做：

拥有一个始终扩展的主要区域
有可选的页眉和页脚在隐藏时折叠

例子：

如果header1 崩溃，则header2 应取而代之，mainAreaExpandMePlease 应扩展至header2 曾经所在的位置
如果header2 折叠，那么mainAreaExpandMePlease 应该再扩大27px
如果footer3 崩溃，那么footer2 会取代footer3，footer1 会取代footer2，mainAreaExpandMePlease 会再向下延伸28px

谢谢！

小提琴：https://jsfiddle.net/jg6ho4wu/1/

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.my-grid {
    display: grid;
    grid-template-areas:
        "header1"
        "header2"
        "mainAreaExpandMePlease"
        "footer1"
        "footer2"
        "footer3";
    grid-template-rows: 27px 27px 1fr 28px 28px 28px;
    height: 100%;
}

.header1 {
  grid-area: header1;
  background-color: yellow;
}

.header2 {
  grid-area: header2;
  background-color: magenta;
}

.mainAreaExpandMePlease {
  grid-area: mainAreaExpandMePlease;
  background-color: cyan;
}

.footer1 {
  grid-area: footer1;
  background-color: green;
}

.footer2 {
  grid-area: footer2;
  background-color: red;
}

.footer3 {
  grid-area: footer3;
  background-color: blue;
}

<div class="my-grid">
  <div class="header1"></div>
  <div class="header2"></div>
  <div class="mainAreaExpandMePlease"></div>
  <div class="footer1"></div>
  <div class="footer2" style="display:none"></div>
  <div class="footer3"></div>
</div>

【问题讨论】：

标签： html css grid css-grid

【解决方案1】：

不要在容器级别设置页眉和页脚行的高度。

在项目上设置它们的高度，并将它们的容器高度设置为auto。

.my-grid {
  display: grid;
  height: 100vh;
  grid-template-rows: auto auto 1fr auto auto auto;
  grid-template-areas:  "header1" 
                        "header2"
                        "mainAreaExpandMePlease"
                        "footer1"
                        "footer2"
                        "footer3";
}

.header1 {
  height: 27px;
  grid-area: header1;
  background-color: yellow;
}

.header2 {
  height: 27px;
  grid-area: header2;
  background-color: magenta;
}

.mainAreaExpandMePlease {
  grid-area: mainAreaExpandMePlease;
  background-color: cyan;
}

.footer1 {
  height: 28px;
  grid-area: footer1;
  background-color: green;
}

.footer2 {
  height: 28px;
  grid-area: footer2;
  background-color: red;
}

.footer3 {
  height: 28px;
  grid-area: footer3;
  background-color: blue;
}

body {
  margin: 0;
  padding: 0;
}

<div class="my-grid">
  <div class="header1"></div>
  <div class="header2"></div>
  <div class="mainAreaExpandMePlease"></div>
  <div class="footer1"></div>
  <div class="footer2" style="display:none"></div>
  <div class="footer3"></div>
</div>

【讨论】：