CSS网格模板列，在响应堆叠后，希望使第二个div等于第二行宽度的100%宽度

rsl1atfo 于 2023-03-20 发布在其他

关注(0)|答案(2)|浏览(170)

我正在使用css网格，当我调整窗口大小时，容器内的两个div将响应从一行2个div到每行1个div的变化。
我的第一个div比第二个div宽，4个跨度版本2个跨度。这里是我卡住的地方。当我调整窗口大小时，第二个div移动到第一个div下面，但我希望两者等宽。第一个div占据了第一行的100%，但是第二个分区占据了第二行的25%。当它们堆叠在一起的时候，我怎么能让它们都占据100%的行呢？

HTML
<div class="myContainer">
  <div class="area1">
    ...
  </div>
  <div class="area2">
    ...
  </div>
</div>

CSS

.myContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.myContainer > div:first-child {
  grid-column: span 4; // make my first div container wider than 2nd div container
}
.myContainer > div:nth-child(2){
  grid-column: span 1; // set the width of my 2nd div container
}

当页面第一次加载时，它看起来不错，第一个div容器的宽度比第二个div容器宽。
我缩小了窗口的宽度，第二个div容器堆叠在第一个div容器下面，但是宽度仍然很小。我认为它仍然设置为跨度1。
我尝试了以下方法
//添加了span-4
...//在css @介质中（最小宽度：175 px）{ .span-4 {网格-列：span 4; //此处不成功} }
.区域{宽度：百分之百;
任何帮助都将不胜感激。先谢了。a

css

来源：https://stackoverflow.com/questions/75758353/css-grid-template-columns-after-responsive-stacking-want-to-make-2nd-div-equal

2条答案

按热度按时间

liwlm1x91#

当两个div堆叠在一起时，要使它们占据100%的行，可以使用grid-template-rows属性。将第一行设置为auto，第二行设置为1fr。这将使第一行占据适合内容所需的高度，第二行占据网格中的剩余空间。
以下是更新的CSS：

.myContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  grid-template-rows: auto 1fr; /* add this line */
}

.myContainer > div:first-child {
  grid-column: span 4;
  grid-row: 1; /* add this line */
}

.myContainer > div:nth-child(2){
  grid-column: span 1;
  grid-row: 2; /* add this line */
}

您可能需要根据所需的布局和容器的大小调整grid-template-columns值。

赞(0）回复(0）举报 2023-03-20

hpcdzsge2#

当宽度为700px或更小时，所施加的约束等同于网格变为单列。
因此，此代码段不会改变子对象的跨度，但最初将网格设置为两列4fr 1fr，并在视口缩小到700px或更小时将其重置为单列。

* {
  margin: 0;
}

.myContainer {
  display: grid;
  grid-template-columns: 4fr 1fr;
}

.myContainer>div:first-child {
  background: yellow;
}

.myContainer>div:nth-child(2) {
  background: pink;
}

@media (max-width: 700px) {
  .myContainer {
    grid-template-columns: 1fr;
  }
}

<div class="myContainer">
  <div class="area1">
    ...
  </div>
  <div class="area2">
    ...
  </div>
</div>

赞(0）回复(0）举报 2023-03-20

我来回答

CSS网格模板列，在响应堆叠后，希望使第二个div等于第二行宽度的100%宽度

2条答案

相关问题

热门标签

最新问答