如何为动态生成的问卷实现移动端兼容的CSS Grid布局？

嘿，我来帮你搞定这个问卷布局的难题！针对你遇到的三个Grid适配问题，我调整了代码并给出了完整的解决方案，咱们一步步来看：

核心问题修复方案 #

1. 让左侧问题栏默认宽度大于答案区域 #

原来的repeat(auto-fit, minmax(6em, 1fr))会让所有列平分宽度，咱们修改grid-template-columns，给问题列分配更大的比例和合理的最小宽度，确保它默认占据更多空间，同时适配移动端：

.questionContainer {
  display: grid;
  /* 问题列占2份宽度，答案列自适应且最小150px */
  grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(150px, 1fr));
  align-items: center; /* 新增：让所有元素垂直居中 */
  gap: 1em; /* 新增：列之间添加间距，更美观 */
}

2. 问题文本较长时答案垂直居中对齐 #

给questionContainer添加align-items: center，就能让所有子元素（包括问题和多个答案选项）都垂直居中，不管问题文本有多长。同时去掉question里的grid-row-end: span 1000，这个极端值会导致布局异常，Grid会自动处理行跨度。

3. 解决选项文本超出宽度的问题 #

给答案里的标签添加文本换行属性，同时让输入框自适应父容器宽度：

.answer label {
  word-break: break-word; /* 长文本自动换行 */
  overflow-wrap: break-word;
}
.answer input[type=text] {
  width: 100%; /* 去掉固定宽度，自适应容器 */
  box-sizing: border-box; /* 避免padding导致溢出 */
}

额外提示：不要用表格包裹div #

表格的布局规则会完全覆盖Grid的特性，所以坚持用div+Grid的组合就好，没必要嵌套表格。

修改后的完整代码 #

CSS部分 #

.mainContainer { 
  /* Borders temporary, to see if element exceeds max-width */ 
  width: 95%; 
  max-width: 1200px; 
  padding: .4em; 
  margin: auto; 
  border: 1px solid #b5b5b5; 
}
.questionContainer { 
  display: grid; 
  grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
  gap: 1em;
  margin-bottom: 1em; /* 新增：问题之间添加间距 */
}
.question {
  align-self: center;
  /* 去掉grid-row-end: span 1000，避免布局异常 */
}
.answer { 
  border: 1px solid #b5b5b5; 
  padding: .5em; /* 新增：内部添加padding，更美观 */
}
.answer label {
  word-break: break-word;
  overflow-wrap: break-word;
}
.answer input[type=text] {
  width: 100%;
  box-sizing: border-box;
  padding: .3em;
}
hr { 
  border-style: dotted; 
  margin: 1.5em 0;
}

HTML部分 #

<div class="mainContainer">
<!-- Start first question -->
<div class="questionContainer">
<div class="question"> This text should, always, be filling the entire row. Regardless of how many rows are created by the elements next to it, and the css grid.<br /><br /> Problem:It should by default have more width than the answers. <br /><br /> Problem 2: The answers should now be more vertically aligned to the center, if the question asked is as long as this. </div>
<div class="answer"> <input type="radio" name="Radio" id="Radio1" /> <label>In tincidunt semper sapien</label> </div>
<div class="answer"> <input type="radio" name="Radio" id="Radio2" /> <label>Quisque hendrerit tellus nec ex pellentesque gravida.</label> </div>
<div class="answer"> <input type="radio" name="Radio" id="Radio3" /> <label>Cras in odio</label> </div>
<div class="answer"> <input type="radio" name="Radio" id="Radio4" /> <label>Nunc nec orci eros.</label> </div>
<div class="answer"> <input type="radio" name="Radio" id="Radio5" /> <label>Curabitur in tempor justo.</label> </div>
<div class="answer"> <input type="radio" name="Radio" id="Radio6" /> <label> Integer ac volutpat nulla, vitae congue arcu.</label> </div>
<div class="answer"> <input type="radio" name="Radio" id="Radio7" /> <label>Problem 3: This_one_will_exceed_the_width.</label> </div>
</div>
<!-- End first question -->
<hr />
<!-- Start second question -->
<div class="questionContainer">
<div class="question"> Phasellus ac aliquam ex. In lacinia nisi nec felis vestibulum porta. </div>
<div class="answer"> <input type="text" placeholder="Nulla ultricies maximus quam ut fermentum." /> </div>
</div>
<!-- End second question -->
</div>

这样修改后，你就能得到一个自适应的问卷布局：问题栏默认更宽、答案始终垂直居中、长文本自动换行，同时完美支持移动端浏览器宽度变化。

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