当我增加屏幕尺寸时，为什么 grid-column-start 和 grid-column-end 会使其他行停止增长？答案

【问题标题】：Why do grid-column-start and grid-column-end make the other rows stop growing when I increase screen size?当我增加屏幕尺寸时，为什么 grid-column-start 和 grid-column-end 会使其他行停止增长？
【发布时间】：2022-01-17 19:07:30
【问题描述】：

我在下面的链接中看到了这个确切的问题，但我认为答案并不令人满意。

CSS Grid: Auto-fit behaving like Auto-fill when using grid-column-start/end

我在一个主 div 元素中有六个 div，其中一个类为“main”。我希望六个 div 在不同的屏幕上响应，所以我在主 div 上使用了以下简化的 CSS。

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

使用上面的代码，当我自动调整大小时，我发现我的 div 响应非常好。

但是我立即使用下面的伪选择器定位第三个 div，当 O 调整大小时，其他五个 div 的大小停止增长。

这是我定位第三个 div 的方式：

.Main div:nth-child(3){   
  grid-column-start: 1; 
  grid-column-end: -1;
}

可能是什么问题？我仍然想要响应式设计。

#div1 { background: yellow     }
#div2 { background: dodgerblue }
#div3 { background: tomato     }
#div4 { background: limegreen  }
#div5 { background: yellow     }
#div6 { background: pink     }

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

.Main div:nth-child(3){   
  grid-column-start: 1; 
  grid-column-end: -1;
}

<div class="Main">
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
  <div id="div4">Div 4</div>
  <div id="div5">Div 5</div>
  <div id="div6">Div 6</div>
<div/>

【问题讨论】：

尝试将grid-auto-flow: dense;添加到.Main
谢谢，但我不想失去元素的顺序
我很困惑。你想要的结果是什么？
div 1 和 div 2 应该是响应式的，div 3 应该占据整个宽度，div 4 到 6 也应该是响应式的。
您对这里的responsive有什么期望？我也很难理解你的网格定义。 fr 在没有明确定义列数的情况下有多大意义？

标签： html css css-grid

【解决方案1】：

你想要的不是网格。改用 flexbox：

#div1 { background: yellow     }
#div2 { background: dodgerblue }
#div3 { background: tomato     }
#div4 { background: limegreen  }
#div5 { background: yellow     }
#div6 { background: pink     }

.Main {
  display: flex;
  flex-wrap:wrap;
}
.Main > div {
  flex: 250px;
}
.Main div:nth-child(3){   
  flex: 100%;
}

<div class="Main">
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
  <div id="div4">Div 4</div>
  <div id="div5">Div 5</div>
  <div id="div6">Div 6</div>
</div>

【讨论】：