为单个 CSS 网格行设置高度值
Set a height value on an individual CSS Grid row
我有一个 CSS 网格布局,其中顶行使用 grid-column
属性 跨越整个网格。
有谁知道如何将此行设置为 100 像素高并将所有后续行设置为 grid-auto-rows
200 像素的高度?
我知道我可以使用 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>
您可以使用 grid-template-rows
属性.
我猜你正在寻找这样的东西:
https://codepen.io/harora/pen/EbaQxr
这是对网格模型的一个很好的参考:
Grid Model Explained
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 可以干净、轻松地做到这一点。
首先,您不需要为网格项本身设置高度值。这覆盖了 CSS 网格的一大好处:能够在容器级别控制网格项的尺寸。
您知道您的网格总是至少有一行:顶行。那是你的 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 */
}
我有一个 CSS 网格布局,其中顶行使用 grid-column
属性 跨越整个网格。
有谁知道如何将此行设置为 100 像素高并将所有后续行设置为 grid-auto-rows
200 像素的高度?
我知道我可以使用 grid-template-rows
为所有特定行输入单独的值,但是页面上会有很多 div,不想输入 100px 然后加载使用此 grid-template-rows
属性.
我在想一定有一种方法可以在某些行上设置单独的像素值,然后将其他所有内容都设置为 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>
您可以使用 grid-template-rows
属性.
我猜你正在寻找这样的东西:
https://codepen.io/harora/pen/EbaQxr
这是对网格模型的一个很好的参考: Grid Model Explained
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 可以干净、轻松地做到这一点。
首先,您不需要为网格项本身设置高度值。这覆盖了 CSS 网格的一大好处:能够在容器级别控制网格项的尺寸。
您知道您的网格总是至少有一行:顶行。那是你的 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 */
}