空间不足时隐藏Grid项目的实现方案咨询

针对你提出的Grid容器响应式需求，我们可以通过CSS文本溢出控制和媒体查询实现层级隐藏逻辑，具体方案如下：

核心实现思路 #

• 给Grid子项添加明确类名，方便精准控制样式
• 强制JIRA编号项不换行
• 摘要项默认开启文本溢出省略效果
• 通过媒体查询根据容器宽度逐步隐藏状态项、摘要项

完整代码示例 #

HTML 部分 #

<div class="grid-container">
  <div class="jira-id">Jira-123</div>
  <div class="icon">Icon</div>
  <div class="summary">Summary - This is a summary of jira item</div>
  <div class="status">In progress</div>
</div>
<br />
<br />
<div><input type="number" value="100" id="widthInput" /></div>
<button onclick="handleWidth()">set width</button>

CSS 部分 #

.grid-container {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px; /* 用gap替代padding-right，布局更整洁 */
}

/* JIRA编号强制不换行 */
.jira-id {
  white-space: nowrap;
}

/* 摘要项默认开启溢出省略 */
.summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 当容器宽度小于600px时，隐藏状态项并调整Grid布局 */
@media (max-width: 600px) {
  .status {
    display: none;
  }
  .grid-container {
    grid-template-columns: auto auto 1fr;
  }
}

/* 当容器宽度小于400px时，隐藏摘要项并调整Grid布局 */
@media (max-width: 400px) {
  .summary {
    display: none;
  }
  .grid-container {
    grid-template-columns: auto auto;
  }
}

JS 部分（保留原逻辑） #

function handleWidth() {
  const inputValue = document.getElementById("widthInput").value;
  document.getElementsByClassName("grid-container")[0].style.width = inputValue + '%';
}

效果说明 #

1. 容器宽度充足时：四个子项正常显示，摘要项占据剩余空间
2. 容器宽度缩小到600px以下：状态项隐藏，摘要项显示省略号
3. 容器宽度进一步缩小到400px以下：摘要项隐藏，仅保留JIRA编号和图标项，且JIRA编号始终不换行

你可以根据实际需求调整媒体查询的阈值（600px、400px），或者改用基于容器宽度的container queries（需浏览器支持）来更精准适配容器尺寸变化。

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