在 CSS 网格中创建隐式行

Question

我有一个简单的 CSS 网格。

我希望 #right 和 main 元素在移动设备视图（宽度为 800 像素）中相互重叠。

我认为添加这个：

main,
#right {
    grid-column: 2 / span 2;
}

会将 main 和 #right 元素放在彼此之下，但没有这样的运气。看起来它们都有 100% 的高度，导致它们重叠。

所以我想看到的是：

main {
    margin-top: 90%;
    height: 50%;
}
#right {
    height: 50%;
}

但是当然是由 CSS 网格引起的。

https://plnkr.co/edit/J0gZRP9LUak4n6eebnhh?p=preview

body,
html {
  height: 100%;
}

#grid-wrapper {
  height: 100vh;
  display: grid;
  grid-template: "header header header" 66px "subheader subheader subheader" 55px "left main right" auto / 18.75% auto 25%;
}

header {
  grid-area: header;
  display: grid;
  grid-template: "logo searchbar hamburgermenu" auto / 18.75% auto 25%;
}

header #logo {
  grid-area: logo;
  background: red;
}

header #searchbar {
  grid-area: searchbar;
  background: yellow;
}

header #hamburgermenu {
  grid-area: hamburgermenu;
  background: teal;
}

.subheader {
  grid-area: subheader;
  display: grid;
  grid-template: ". telephone-content ." auto / 18.75% auto 25%;
  background: wheat;
}

.subheader .telephone-content {
  grid-area: telephone-content;
  background: lightcoral;
}

#left {
  grid-area: left;
  background: darkgray;
}

main {
  grid-area: main;
  background: lightskyblue;
}

#right {
  grid-area: right;
  background: lightsalmon;
}


/* TABLET VIEW */

@media screen and (max-width: 1024px) {
  header {
    grid-template: "logo searchbar hamburgermenu" auto / 6.75% auto 25%;
  }
  .subheader {
    grid-template: ". telephone-content ." auto / 6.75% auto 25%;
  }
  #grid-wrapper {
    grid-template: "header header header" 66px "subheader subheader subheader" 55px "left main right" auto / 6.75% auto 25%;
  }
}


/* MOBILE VIEW */

@media screen and (max-width: 800px) {
  header {
    grid-template: "logo searchbar hamburgermenu" auto / 66px auto 66px;
  }
  .subheader {
    grid-template: "telephone-content telephone-content telephone-content" auto / 66px auto 66px;
  }
  #grid-wrapper {
    grid-template: "header header header" 66px "subheader subheader subheader" 55px "left main right" auto / 6.75% auto 25%;
  }
  #left {
    /* grid-row: 1 / span 2; */
  }
  #right {
    /* grid-column: 2 / 3; */
  }
  main,
  #right {
    grid-column: 2 / span 2;
  }
}

<div id="grid-wrapper">
  <header>
    <div id="logo">
      <h1>Logo</h1>
    </div>
    <div id="searchbar">
      <p>Header stuff</p>
    </div>
    <div id="hamburgermenu">
      <h1>...</h1>
    </div>
  </header>
  <div class="subheader">
    <p class="telephone-content">Dit is telefoon informatie</p>
  </div>
  <aside id="left">
    <h1>Left</h1>
  </aside>
  <main>
    <h1>Content</h1>
    <p>Saaie boel</p>
  </main>
  <aside id="right">
    <h1>Right</h1>
  </aside>
</div>
</div>

Answer 1

这是您在移动设备视图中看到的内容：

@media screen and (max-width: 800px) {
    #grid-wrapper {
        grid-template: "header header header" 66px 
                       "subheader subheader subheader" 55px
                       "left main right" auto / 6.75% auto 25%;
  }

此布局产生三行三列。

行高：66px 55px 自动
列宽：6.75% 自动 25%

但是您希望 right 出现在 main 下方（或者反之亦然？）。所以试试这个：

@media screen and (max-width: 800px) {
    #grid-wrapper {
        grid-template: "header header header" 66px
                       "subheader subheader subheader" 55px
                       "left main main" auto    /* adjustment */
                       "left right right" auto  /* new row */
                       / 6.75% auto 25%;
    }

https://plnkr.co/edit/X3nlF5Jx3vSdUm52DoyZ?p=preview

在 CSS 网格中创建隐式行

Create implicit rows in CSS grid

css

css-grid