Question

我正在研究网格。我希望第三个块拉伸到整个宽度。如果可能的话，不添加其他类。

是否可以使用内部CSS？

.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
  
  & > * {
    border: dotted 2px black;
  }
}
.first {
  background-color: #6CD4FF;
  grid-row: 1;
}
.second {
  background-color: #8B8DF9;
  grid-row: 1;
}
.third {
  background-color: #DDFD77;
  grid-row: 2;
}

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="third"></div>
</div>

最终，我想得到following。

Answer 1

您可以使用Adjacent Sibling Combinator，它不需要您使用媒体查询，而只需使用CSS Grid属性。

.second + .third {
  grid-column: 1 / span 2;
}

或：

// A bit more generic
div + .third {
  grid-column: 1 / span 2;
}

.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
  
  & > * {
    border: dotted 2px black;
  }
}
.first {
  background-color: #6CD4FF;
  grid-row: 1;
}
.second {
  background-color: #8B8DF9;
  grid-row: 1;
}
.third {
  background-color: #DDFD77;
  grid-row: 2;
}
.second + .third {
  grid-column: 1 / span 2;
}

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="third"></div>
</div>

Answer 2

尝试此代码。希望会帮助您。

.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
  
  & > * {
    border: dotted 2px black;
  }
}
.first {
  background-color: #6CD4FF;
  grid-row: 1;
}
.second {
  background-color: #8B8DF9;
  grid-row: 1;
}
.third {
  background-color: #DDFD77;
  grid-row: 1;
}

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="third"></div>
</div>

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

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

Answer 3

这是更通用的解决方案，您可以在其中使用nth-child()选择器：

.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
}
.grid > * {
    border: dotted 2px black;
  }

.first {
  background-color: #6CD4FF;
}
.second {
  background-color: #8B8DF9;
}
.third {
  background-color: #DDFD77;
}
.grid :nth-child(3):last-child {
  grid-column:span 2;
}

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="third"></div>
</div>

显示：网格。如何将块拉伸到全宽

3 个答案: