CSS网格布局 - 每两行的网格行间距

Question

有没有可能使用行间距来实现带有网格布局，但是每两行之间都有间隙？或者每两行都有边框？

然后我想将元素跨越网格。在网格中增加额外的元素会破坏原有的网格，我不能重叠已经填充的区域。

示例代码：

body{
  background-color:gray;
}
.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 5px;
  grid-template-rows: repeat(12,20px);
  border: 1px solid black;
  background-color:lightgray;
}

.grid > div {
  background: lightblue;
  border: 1px solid cadetblue;
}



#element{
  grid-row: 5 / span 3;
}

The lightgrey element should have lines/borders every second grid row
<div class="grid">
  <div id="element">Element</div>
</div>

示例布局：

覆盖它的Span元素:

其他解决方案也欢迎。

- Janneck Lange

Answer 1

为了跨越元素，您可以使用grid-row-start和grid-row-end属性，如下所示 -

    .item1 {
      grid-row-start: 3;
      grid-row-end: 6;
      background-color:red;
    }
    
    .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 5px;
  grid-template-rows: repeat(12,20px);
  border: 1px solid black;

}

<div class="grid-container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>  
      <div class="item4">4</div>
      <div class="item5">5</div>
      <div class="item6">6</div>
      <div class="item7">7</div>
      <div class="item8">8</div>  
    </div>

对于行间距，请不要使用grid-row-gap，而是添加边距，例如：

.grid > div:nth-child(4n + 1), .grid > div:nth-child(4n + 2) {
    margin-top: 1em;
}

.grid > div:nth-child(4n + 3), .grid > div:nth-child(4n + 4) {
    margin-bottom: 1em;
}

使用padding代替添加负边距。它的效果是一样的。（个人认为添加负边距会使布局变得复杂，但这是您的选择）

- Monika Mangal

---

把@kukkuz的答案和你的答案结合起来吧 ;) - Janneck Lange

是的，你可以这样做。但我正在尝试寻找比添加负边距更好的行间距方法。如果找到了什么，我会发布的 :-) - Monika Mangal

Answer 2

要在每两行之间有一个“行间距”，您可以尝试为“网格容器”设置“grid-row-gap”属性，然后使用“负边距”和一些“nth-child逻辑”来调整行间距（假设这是一个2列布局）。

这最多只是一个hack，无论如何，请参见下面的演示：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 1em;
  grid-auto-rows: 1fr;
  counter-reset: counter;
}

.grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: lightblue;
  border: 1px solid cadetblue;
}

.grid > div:before {
  counter-increment: counter;
  content: counter(counter);
}

.grid > div:nth-child(4n + 1), .grid > div:nth-child(4n + 2) {
  margin-bottom: -0.5em;
}

.grid > div:nth-child(4n + 3), .grid > div:nth-child(4n + 4) {
  margin-top: -0.5em;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

- kukkuz

---

这是我问题的第一部分的解决方案，但对于我的第二个问题没有解决方案。https://codepen.io/anon/pen/WqKxZR - Janneck Lange

@JanneckLange 这个解决方案无法解决第二个问题，因为跨行会破坏nth-child-negative-margin逻辑。 - kukkuz

Answer 3

是的，但是通过定义与所需的额外“间隙”相匹配的grid-auto-rows结构。

这是不语义化的，因为我们仅仅使用元素进行样式和间距。

body {
  background-color: gray;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  grid-auto-rows: 20px 20px 5px;
  border: 1px solid black;
  background-color: lightgray;
}

.grid>div {
  border: 1px solid cadetblue;
  background: lightblue;
}

.item.red {
  background: red;
  grid-column: span 2;
}

.item.spanner {
  grid-row: span 3;
  background: orange;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item red"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item red"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item spanner"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

- Paulie_D

Answer 4

我有一个解决方案。使用绝对定位放置hr元素，并使它们变大以覆盖所有内容。z-index将把线条放在我的元素下面。

body{
  background-color:gray;
}

.grid {
  display: grid;
  grid-template-columns: 0.1fr 1fr 0.1fr;
  grid-gap: 5px;
  grid-template-rows: repeat(18, 15px);
  border: 1px solid black;
  background-color:lightgray;
}

#element{
  grid-column:2;
  grid-row: 3 / span 6;
  background-color:green;
  z-index:3;
  margin: 5px;
}

.H1{
  grid-column:1;
  grid-row: 1;
}
.H2{
  grid-column:1;
  grid-row: 7;
}

.H3{
  grid-column:1;
  grid-row: 13;
}

.Hr{
  position: absolute;
  background-color: black;
  height: 2px;
  width:100%;
}

.Vr{
    position: absolute;
  background-color: black;
  width: 2px;
  height:100%;
}

.V1{
    grid-column:1;
  grid-row: 1;
}

.V1{
    grid-column:3;
  grid-row: 1;
}

<div class="grid">
  <div class="H1"><hr class="Hr" /></div>
  <div class="H2"><hr class="Hr"/></div>
  <div class="H3"><hr class="Hr"/></div>
  <div class="V1"><hr class="Vr" /></div>
  <div class="V2"><hr class="Vr" /></div>
  <div id="element">Element</div>
</div>

- Janneck Lange

---

那么这只涉及到视觉结果吗？如果是的话，我有一个更简单的解决方案，不需要额外的元素。 - Temani Afif

Answer 5

 

<head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="row mb-5 table-bordered">
    <div class="col-12">
      <div class="row">
        <div class="col-6">1</div>
        <div class="col-6">2</div>
      </div>
      <div class="row">
        <div class="col-6">3</div>
        <div class="col-6">4</div>
      </div>
    </div>
  </div>
  <div class="row table-bordered">
    <div class="col-12">
      <div class="row">
        <div class="col-6">A</div>
        <div class="col-6">B</div>
      </div>
      <div class="row">
        <div class="col-6">C</div>
        <div class="col-6">D</div>
      </div>
    </div>
  </div>
</body>

- Ritz

---

这是一个Bootstrap网格布局。我使用CSS Grid布局：https://blog.kulturbanause.de/2013/12/css-grid-layout-module/ - Janneck Lange