Question

是否可以使用具有行间隙的网格布局，但间隙仅每2行？还是每2行有一个边框？

之后，我想在网格上跨元素。放置一个额外的元素，因为线条会破坏网格，我不能覆盖已经填充的区域。

示例代码：

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>

示例布局：

跨度在其上：

也欢迎其他解决方案。

Answer 1

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

这充其量是骇客，无论如何请参见下面的演示

.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>

Answer 2

要覆盖元素，可以使用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;
}

而不是增加负边距。它将工作相同。（个人而言，我不喜欢添加负边距，因为它会使布局复杂化，但您可以选择）

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>

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>

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>

CSS网格布局-每2行网格行间距

5 个答案: