在单个CSS网格行上设置高度值 [英] Set a height value on an individual CSS Grid row

问题描述

我有一个CSS网格布局，其中的第一行使用grid-column属性跨越了整个网格.

I have a CSS grid layout where I have the top row spanning the entire grid using the grid-column property.

有人知道我如何将该行设置为100px高，并将所有后续行设置为200px的grid-auto-rows高度?

Does anyone know how I can set this row to be 100px high and have all the subsequent rows set to a grid-auto-rows height of 200px?

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

I know I can input individual values with grid-template-rows for all the specific rows, but there are going to be a lot of divs on the page and don't want to input 100px and then a load of 200px values using this grid-template-rows property.

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

I'm thinking there must be a way to set individual pixel values on certain rows and then have everything else as grid-auto-rows?

我似乎在文档中找不到如何执行此操作.

I can't seem to find how to do this in the docs.

任何帮助都会很棒！

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>

推荐答案

有人知道我如何将这一行设置为100px高，并将所有后续行设置为200px的grid-auto-rows高度吗?

Does anyone know how I can set this row to be 100px high and have all the subsequent rows set to a grid-auto-rows height of 200px?

是的. Grid可以轻松干净地做到这一点.

Yes. Grid can do this cleanly and easily.

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

First, you don't need to set a height value on the grid item itself. That overrides one of the great benefits of CSS Grid: the ability to control the dimensions of grid items at the container level.

您知道网格将始终至少有一行:第一行.那就是您的 显式网格 .

You know that your grid will always have at least one row: the top row. That's your explicit grid.

您不知道还会有多少行.该数字是可变且不可预测的.那就是您的 隐式网格 .

You don't know how many additional rows there will be. That number is variable and unpredictable. That's your implicit grid.

grid-template-rows 和 grid-template-columns 属性在显式网格中设置轨道大小.

The grid-template-rows and grid-template-columns properties set track sizes in the explicit grid.

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

The grid-auto-rows and grid-auto-columns properties set track sizes in the implicit grid.

因此，这可能是您要查找的内容:

Therefore, this is probably what you're looking for:

.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 */
}

修订后的代码笔

这篇关于在单个CSS网格行上设置高度值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！