如何实现动态宽度下CSS Grid前4列与后3列各占半宽？

直接通过grid-template-columns结合minmax()和百分比计算就能实现需求，无需拆分网格为子网格，具体代码如下：

.grid-container {
  display: grid;
  /* 前4列：最小宽度为内容宽度，最大为容器50%宽度均分；后3列同理 */
  grid-template-columns: 
    repeat(4, minmax(min-content, calc(50% / 4))) 
    repeat(3, minmax(min-content, calc(50% / 3)));
  gap: 8px; /* 可根据需求调整列间隙 */
  width: 100%; /* 网格容器占满父容器宽度 */
}

逻辑说明 #

1. 最小宽度保障：min-content确保每列不会窄于自身内容的宽度，避免内容溢出或挤压。
2. 总宽均分控制：calc(50% / 4)和calc(50% / 3)分别限制前4列、后3列的单列最大宽度，使得两组总宽度最多各占容器的50%，实现严格均分。
3. 自适应分配：当列内容宽度小于最大限制时，列会自动扩展至最大宽度，组内所有列平分50%的空间，保证总宽刚好占比一半；当内容宽度超过最大限制时，列会以内容宽度显示（若需避免容器溢出，可添加overflow-x: auto让网格横向滚动）。

可选优化（内容截断） #

如果需要强制两组总宽始终保持50%，不允许内容撑开宽度，可以给网格项添加内容截断样式：

.grid-container > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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