时间戳

首页 > 解决方案 > 显示：网格。如何将块拉伸到全宽

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

问题描述

我正在研究网格。我希望第三个块伸展到它的全宽。如果可能，无需添加额外的类。

是否可以使用内部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>

最终，我想得到以下.

标签： csscss-grid

解决方案

您可以使用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>

推荐阅读