如何避免容器内元素在某元素隐藏时发生位移？

我在容器中使用Grid布局放置了3个元素（h1为计时器、h2为休息时间文本、FontAwesome图标为暂停标识），布局效果如下：

当前JSX代码：

<div className='session-wrap'>
  {props.breakSwitch && <h2 
    className={props.pauseSwitch === true ? 'timer-paused' 
      : props.breakSwitch === true ? 'timer-on-break'
      : 'timer-active'}
  >
    Break Time</h2>}
  <h1 
    className={props.pauseSwitch === true ? 'timer-paused' 
      : props.breakSwitch === true ? 'timer-on-break'
      : 'timer-active'}
  >
    {props.displayedTime}</h1>
  {props.pauseSwitch && <FontAwesomeIcon className='pause-icon' icon={faPause} size='2xl' style={{color: "#ffa257",}} />}       
</div>

当前CSS代码：

.session-wrap {
  background-color: rgb(34, 32, 39);
  text-align: center;
  display: grid;
  grid-template-rows: auto 250px auto;
  color: white;
  padding: 5px;
  margin: 40px auto;
  border: 1px solid #808080;
  border-radius: 40px;
  width: 550px;
  height: 400px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.session-wrap > h1 {
  margin: auto 0;
  font-size: 120px;
  text-align: center;
  display: inline-block;
}

.session-wrap > h2 {
 margin: auto 0;
}

.pause-icon {
  margin: auto auto;
  height: 70px;
}

.timer-paused {
  color: #ffa257
}

遇到的问题：休息时间文本和暂停图标会根据状态切换显隐，当其中一个元素隐藏时，网格行的尺寸会变化，导致中间的计时器发生位移。试过flex布局的多种配置，元素隐藏时计时器仍会位移；用position:absolute手动定位，缩放时元素位置会错乱。求实现稳定布局的最优方案。

核心思路是锁定网格布局的结构，不让行高/行数量随元素显隐变化，以下两种方案都能解决问题，按需选择：

方案1：用visibility: hidden替代元素移除，固定网格行高 #

把原来的auto行高改成固定值，同时修改元素显隐逻辑，不直接移除元素，而是隐藏但保留占位：

步骤1：修改Grid行高配置 #

更新.session-wrap的grid-template-rows，把auto替换成固定高度（匹配元素显示时的实际高度）：

.session-wrap {
  /* 其他样式不变 */
  grid-template-rows: 80px 250px 70px; /* 上/下行高度按需调整 */
}

步骤2：修改JSX显隐逻辑 #

不再用props.breakSwitch &&直接移除元素，而是通过类名控制可见性：

<div className='session-wrap'>
  <h2 
    className={`
      ${props.pauseSwitch === true ? 'timer-paused' : props.breakSwitch === true ? 'timer-on-break' : 'timer-active'}
      ${!props.breakSwitch ? 'hidden' : ''}
    `}
  >
    Break Time
  </h2>
  <h1 
    className={props.pauseSwitch === true ? 'timer-paused' : props.breakSwitch === true ? 'timer-on-break' : 'timer-active'}
  >
    {props.displayedTime}
  </h1>
  <FontAwesomeIcon 
    className={`pause-icon ${!props.pauseSwitch ? 'hidden' : ''}`} 
    icon={faPause} 
    size='2xl' 
    style={{color: "#ffa257",}} 
  />       
</div>

步骤3：新增隐藏样式 #

.hidden {
  visibility: hidden; /* 隐藏元素但保留原位置占位 */
}

这样网格的行高始终固定，元素隐藏时只是不可见，不会影响布局结构，计时器位置完全稳定。

方案2：固定网格占位容器，内容嵌套在占位容器内 #

如果必须移除元素（比如减少不必要的渲染），可以在Grid容器内固定放置3个占位div，把动态内容嵌套在占位div中：

步骤1：修改JSX结构 #

<div className='session-wrap'>
  {/* 顶部占位容器 */}
  <div className="grid-row grid-row-top">
    {props.breakSwitch && <h2 
      className={props.pauseSwitch === true ? 'timer-paused' : props.breakSwitch === true ? 'timer-on-break' : 'timer-active'}
    >
      Break Time
    </h2>}
  </div>
  {/* 中间计时器容器 */}
  <div className="grid-row grid-row-middle">
    <h1 
      className={props.pauseSwitch === true ? 'timer-paused' : props.breakSwitch === true ? 'timer-on-break' : 'timer-active'}
    >
      {props.displayedTime}
    </h1>
  </div>
  {/* 底部占位容器 */}
  <div className="grid-row grid-row-bottom">
    {props.pauseSwitch && <FontAwesomeIcon className='pause-icon' icon={faPause} size='2xl' style={{color: "#ffa257",}} />}
  </div>
</div>

步骤2：更新CSS样式 #

.session-wrap {
  /* 其他样式不变 */
  grid-template-rows: 80px 250px 70px; /* 固定行高 */
}

.grid-row {
  display: flex;
  align-items: center;
  justify-content: center; /* 保证内容在占位容器内居中 */
}

/* 原有样式可以保留，无需额外修改 */

这种方式下，不管内容是否渲染，Grid的3行结构始终存在，计时器的位置不会因为上下元素的显隐发生任何位移，同时缩放时能跟随容器自动适配。

方案对比 #

• 方案1实现简单，无需改动太多结构，适合元素显隐频繁的场景；
• 方案2更灵活，适合需要完全移除元素（比如性能优化）的场景；
• 两种方案都比flex/absolute更可靠：flex布局在元素消失后会重新分配剩余空间，导致位移；absolute定位脱离文档流，缩放时无法自动适配容器尺寸。

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