CSS grid-template-columns,响应式堆叠后,想要使第二行的第二个 div 等宽 100% 宽度

问题描述 投票:0回答:2

我正在使用 css 网格,当我调整窗口大小时,容器内的两个 div 将响应从连续 2 个 div 到每行 1 个 div。

我的第一个 div 比第二个 div 宽,4 跨度版本 2 跨度。这就是我被困的地方。当我调整窗口大小时,第二个 div 移动到第一个 div 下面,但我希望两者宽度相等。第一个 div 占据第一行的 100%,但第二个 div 占据第二行的 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 容器下面,但宽度仍然小得多。我认为它仍然设置在 span 1.

我尝试了以下

// 添加了 span-4

... // 在 CSS 中 @media(最小宽度:175px){ .span-4 { 网格列:跨度 4; // 这里没有运气 } }

.区域{ 宽度:100%; }

非常感谢任何帮助。提前致谢。一个

css grid
2个回答
0
投票

要使两个 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
投票

当宽度小于或等于 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>

© www.soinside.com 2019 - 2024. All rights reserved.