在单个CSS网格行上设置高度值

Question

我有一个CSS网格布局,我使用该grid-column属性跨越整个网格的顶行.

有谁知道如何将此行设置为100px高并将所有后续行设置为grid-auto-rows200px 的高度？

我知道我可以输入grid-template-rows所有特定行的单个值,但页面上会有很多div,并且不想输入100px,然后使用此grid-template-rows属性输入200px的值.

我认为必须有一种方法可以在某些行上设置单个像素值,然后将其他所有内容设置为grid-auto-rows？

我似乎无法在文档中找到如何做到这一点.

任何帮助都是极好的!

https://codepen.io/emilychews/pen/dZPJGQ

.gridwrapper {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  grid-auto-rows: 200px;
  grid-template-rows: 100px 200px;
  grid-gap: 10px;
}

nav {
  background: yellow;
}

.gridwrapper div {
  padding: 1em;
  background: red;
  color: white;
  box-sizing: border-box;
}

.gridwrapper div:nth-child(odd) {
  background: blue;
}

nav {
  grid-column: 1 / -1;
}

/*MAKE DIVS 1FR ON MOBILE*/
@media only screen and (max-width: 736px) {
  .gridwrapper {
    grid-template-columns: 1fr;
  }
}

<div class="gridwrapper">
  <nav class="grid">1</nav>
  <div class="grid">2</div>
  <div class="grid">3</div>
  <div class="grid">4</div>
  <div class="grid">5</div>
  <div class="grid">6</div>
</div>

Answer 1

有谁知道如何将此行设置为100px高并将所有后续行设置为grid-auto-rows200px 的高度？

是.网格可以干净利落地完成这项工作.

首先,您不需要在网格项本身上设置高度值.这超越了CSS Grid的一大优势:能够在容器级别控制网格项的维度.

您知道您的网格将始终至少有一行:第一行.这是你明确的网格.

你不知道会有多少额外的行.这个数字是可变的,不可预测的.这是你隐含的网格.

在grid-template-rows和grid-template-columns属性设置明确的网格轨道大小.

在grid-auto-rows和grid-auto-columns属性中设置的隐含网格轨道大小.

因此,这可能是您正在寻找的:

.gridwrapper{
    display: grid;
    grid-template-rows: 100px; /* top row is 100px in height */
    grid-auto-rows: 200px;     /* any new rows created are 200px in height */
}

修改后的codepen