如何旋转CSS Grid内的input元素并使其适配父容器？

嘿，我懂你这个痛点！在九宫格布局里旋转特定区域的input，还要让它乖乖填满父容器，确实容易卡壳。我给你分享两个亲测有效的简便方案，直接就能用：

方案一：Transform旋转+Grid居中适配 #

这个方案核心是只旋转内部的input元素，避免旋转grid容器导致布局错位，同时利用Grid的居中能力让旋转后的input完美填充父容器。

示例代码 #

<div class="grid-9">
  <!-- 九宫格其他区域 -->
  <div class="grid-item"></div>
  <div class="grid-item input-wrap"></div>
  <div class="grid-item"></div>
  <!-- 第4个grid-area（对应第二行第一列） -->
  <div class="grid-item input-wrap rotated">
    <input type="text" placeholder="旋转90度的输入框">
  </div>
  <div class="grid-item input-wrap"></div>
  <div class="grid-item input-wrap"></div>
  <div class="grid-item"></div>
  <div class="grid-item input-wrap"></div>
  <div class="grid-item"></div>
</div>

.grid-9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  width: 500px;
  height: 500px;
}

.grid-item {
  border: 1px solid #ddd;
}

/* 普通input容器：用flex拉伸填充 */
.input-wrap {
  display: flex;
}

.input-wrap input {
  flex: 1;
  border: none;
  padding: 10px;
  font-size: 16px;
}

/* 旋转区域的关键样式 */
.input-wrap.rotated {
  /* 改用Grid布局实现内部元素完美居中 */
  display: grid;
  place-items: center;
}

.input-wrap.rotated input {
  /* 旋转90度 */
  transform: rotate(90deg);
  /* 旋转后宽高互换，用100%占满父容器空间 */
  width: 100%;
  height: 100%;
  /* 解除flex默认的min-width限制，避免溢出 */
  min-width: 0;
  /* 确保旋转中心在元素自身中心 */
  transform-origin: center;
}

原理说明 #

• 不直接旋转grid-item容器，避免破坏九宫格的整体布局结构
• 用place-items: center让旋转后的input在父容器中居中
• 设置宽高100%，让旋转后的input刚好填满父容器的宽高（旋转后宽高互换，刚好匹配九宫格区域的尺寸）

方案二：Writing-Mode实现垂直布局（可选） #

如果你只是想让input的内容垂直排列，不需要完全旋转元素本身，可以用writing-mode属性，这种方式更轻量化，不会有transform的尺寸适配问题：

.input-wrap.vertical input {
  writing-mode: vertical-rl;
  /* 可选：翻转文字方向，和rotate(90deg)视觉效果一致 */
  text-orientation: mixed;
}

这个方法适合只需要文字垂直显示的场景，不需要处理transform的尺寸适配，缺点是元素本身没有旋转，只是文字排版方向改变。

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