更改行之间的 CSS Grid 垂直间距答案

【问题标题】：Change CSS Grid vertical gap between rows更改行之间的 CSS Grid 垂直间距
【发布时间】：2019-02-27 19:24:00
【问题描述】：

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

我尝试过使用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>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

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

grid-gap: 10px 20px;

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

grid-row-gap: 10px;

grid-column-gap: 20px;

根据 Mozilla 文档：

此属性被指定为的值，后跟的 >value。如果被省略，它被设置为与相同的 >value。

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

【讨论】：

您好，我已经尝试过“grid-gap”，但它仍然不适合我。出于某种原因，可以在水平方向上工作，但不能在垂直方向上工作。
更新了我的答案，您还应该在 grid-gap 属性中设置第二个值。应该是grid-gap: 5px 10px

【解决方案2】：

来自MDN：

网格自动行

grid-auto-rowsCSS 属性指定隐式创建的网格行轨道。

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

来自MDN：

最小内容

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

在.content，

替换这个：

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

有了这个：

grid-auto-rows: min-content;

结果：

jsFiddle

【讨论】：

【解决方案3】：

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

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

【讨论】：

grid-row-* 属性已弃用。使用row-gap 或column-gap