在行之间更改CSS Grid垂直间隙

Question

如何更改每个网格行之间的垂直间隙？

我尝试过使用grid-gap，但这只会改变水平间隙而不是垂直间隙。任何帮助，将不胜感激。

.wrapper {
  background-color: #1c1c1c;
  border: solid black 1px;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'header header header header header' 'menu content content content content' 'menu content content content content' 'footer footer footer footer footer';
}

.header {
  grid-area: header;
  border: solid white 1px;
  background-color: #3a3a3a;
  margin: 10px;
}

.menu {
  grid-area: menu;
  border: solid white 1px;
  background-color: #3a3a3a;
  margin: 10px;
}

.content {
  grid-area: content;
  border: solid white 1px;
  background-color: #3a3a3a;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  overflow-y: scroll;
}

.footer {
  grid-area: footer;
  border: solid white 1px;
  background-color: #3a3a3a;
  margin: 10px;
}

.menu-item {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  border: solid white 1px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.madeby {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.content {
  list-style: none;
  grid-area: content;
  margin: 10px;
  padding: 10px;
  background-color: #3a3a3a;
}

.top {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.cell {
  border: solid white 1px;
  color: white;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  height: 20px;
  line-height: 20px;
  background-color: #1e1e1e;
}

<div class="wrapper">

  <div class="header">
    <div class="top">header</div>
  </div>
  <div class="menu">
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
  </div>
  <div class="content">
    <input class="cell" type="text" value="dato">
    <input class="cell" type="text" value="nøkkelvaner">
    <input class="cell" type="text" value="oppsumering">
    <input class="cell" type="text" value="oppgaver">
    <input class="cell" type="text" value="andre">
    <input class="cell" type="text" value="dato">
  </div>
  <div class="footer">
    <div class="madeby">footer</div>
  </div>
</div>

Answer 1

来自MDN：

网格自动行

grid-auto-rows CSS属性指定隐式创建的网格行轨道的大小。

如果网格项位于未由grid-template-rows显式调整大小的行中，则会创建隐式网格轨道以保存它。这可以通过明确定位到超出范围的行，或通过自动放置算法创建其他行来实现。

来自MDN：

最小含量

min-content是表示占据网格轨道的网格项的最大最小内容贡献的关键字。

在.content，

替换这个：

grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

有了这个：

grid-auto-rows: min-content; 

结果：

jsFiddle

Answer 2

你可以使用grid-gap属性来解决这个问题，它是grid-row-gap和grid-column-gap的速记属性。第一个值是水平间隙（行间隙），第二个值是垂直间隙（列间隙）

grid-gap: 10px 20px;

您还可以使用以下属性设置网格之间的差距：

grid-row-gap: 10px;

grid-column-gap: 20px;

根据Mozilla文档：

此属性指定为<'row-gap'>的值，后面可选> <column-gap'>的值。如果省略<'column-gap'>，则将其设置为与<'row-gap'>相同的>值。

因此，在您的代码中，您只为行设置了网格间隙，您还应该为列添加第二个值（垂直）

Answer 3

grid-gap属性定义网格布局中行和列之间间隙的大小，并且是以下属性的简写属性：

你也可以使用grid-row-gap或grid-column-gap