Question

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

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

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

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

我似乎无法在文档中找到如何执行此操作。

任何帮助都会很棒！

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

是。网格可以干净利落地完成。

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

您知道您的网格总是至少有一行：第一行。那是你的explicit grid。

您不知道会有多少行。这个数字是可变的，不可预测的。那是你的implicit grid。

grid-template-rows and grid-template-columns属性在显式网格中设置了跟踪大小。

grid-auto-rows and 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 */
}

revised codepen

Answer 2

您可以使用grid-template-rows属性。

我猜你正在寻找这样的东西：

https://codepen.io/harora/pen/EbaQxr

这是对Grid模型的一个很好的引用： Grid Model Explained

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

2 个答案: