更改行之间的CSS网格垂直间距

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

您可以使用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'>的> value。如果省略<'column-gap'>，则将其设置为与<'row-gap'>相同的>值。

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

Answer 2

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

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

Answer 3

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