如何让CSS Grid元素精确占据屏幕的1/2区域？

你的需求是让Grid元素精确占据屏幕的1/2区域，同时避免缩放时列变得过窄，原代码的问题在于repeat(auto-fit, minmax(200px, 1fr))会根据屏幕宽度自动生成多列，无法保证每列刚好是1/2宽度，且200px的最小宽度可能在某些场景下显得过窄。

下面是两种可行的解决方案：

方案1：固定两列，小屏幕自动切换为单列 #

这种方案在宽屏时保持两列各占1/2，屏幕小于设定宽度时自动变为单列，避免横向滚动：

/* 修改后的Grid容器样式 */
.grid-container {
  display: grid;
  /* 每列最小宽度300px，可根据需求调整，超出部分平分空间 */
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  grid-gap: 10px;
  padding: 20px;
}

/* 媒体查询：屏幕宽度小于680px时切换为单列 */
@media (max-width: 680px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

/* Grid项样式保持不变 */
.grid-item {
  background-color: #7a6767;
  border: 1px solid #5e4e4e;
  padding: 20px;
}

方案2：自适应列数，宽屏强制两列，窄屏自动单列 #

利用min()函数结合视口单位，让列宽在宽屏时刚好占屏幕1/2，同时保证最小宽度：

.grid-container {
  display: grid;
  /* 50vw是视口宽度的一半，减去30px抵消padding和gap的影响，最小300px */
  grid-template-columns: repeat(auto-fit, minmax(min(50vw - 30px, 300px), 1fr));
  grid-gap: 10px;
  padding: 20px;
}

.grid-item {
  background-color: #7a6767;
  border: 1px solid #5e4e4e;
  padding: 20px;
}

说明 #

• 两个方案中的300px可根据你的设计需求调整，确保列不会过于狭窄；
• 方案1的媒体查询阈值680px是根据300px*2 + 10px(gap) + 40px(padding)计算得出，可根据实际数值微调；
• 方案2无需额外媒体查询，通过min()函数自动适配不同屏幕宽度。

内容的提问来源于stack exchange，提问作者Joe Musashi