CSS Grid实现移动端单列居中布局：内容左对齐与动态适配

需求说明 #

• 移动端实现居中的单列布局，两侧留有边距
• 列内每个条目包含：标签 + 包裹在<span>中的MUI表单字段，要求标签与下方内容左对齐
• 已知表单字段精确宽度，长标签需自动换行
• 布局行数动态，无法使用grid-template-areas属性

现有尝试代码 #

CSS #

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px 1fr;
  grid-auto-flow: row;
  grid-template-areas: 'side content side';
}

.field {
  grid-area: content;
  border: 1px solid gray;
  padding: 10px;
}

.label {
  hyphens: auto; /* 不确定使用哪个属性实现长标签换行 */
  word-break: break-all;
  overflow-wrap: break-word;
}

.other-data {
  display: block; /* 此样式由外部MUI控制，无法修改 */
}

HTML #

<div class="wrapper">
  <div class="field">
    <span class="label">Label 1</span>
    <span class="other-data">Some other stuff 1</span>
  </div>
  
  <div class="field">
    <span class="label">Label 2</span>
    <span class="other-data">Some other stuff 2</span>
  </div>
  
  <div class="field">
    <!-- 测试长标签 -->
    <span class="label">Label 3 - Longer label</span>
    <span class="other-data">Some other stuff 3</span>
  </div>
  
  <div class="field">
    <span class="label">Label 4</span>
    <span class="other-data">Some other stuff 4</span>
  </div>

</div>

解决方案 #

优化后的CSS实现 #

通过更简洁的布局逻辑满足所有需求，无需依赖复杂Grid模板：

.wrapper {
  width: 100%;
  padding: 0 16px; /* 自定义两侧边距大小 */
  box-sizing: border-box;
}

.field {
  max-width: 300px; /* 表单字段的精确宽度 */
  margin: 0 auto 16px; /* 实现居中，同时添加底部间距 */
  border: 1px solid gray;
  padding: 10px;
}

.label {
  display: block; /* 让标签独占一行，确保与下方内容左对齐 */
  margin-bottom: 8px; /* 标签与表单字段的间距 */
  overflow-wrap: break-word; /* 长标签优先在单词边界换行，排版更友好 */
  word-break: normal;
}

/* 保留原有MUI控制的样式，无需修改 */
.other-data {
  display: block;
}

方案说明 #

1. 居中布局：wrapper设置左右内边距，field通过max-width限制宽度+margin: 0 auto实现居中，完美适配移动端两侧留边需求
2. 左对齐处理：将.label设为块级元素，自动独占一行，自然和下方的表单字段保持左对齐
3. 长标签换行：使用overflow-wrap: break-word替代强制拆分的break-all，优先在单词间隙换行，避免破坏可读性
4. 动态行数兼容：每个.field是独立块级元素，行数动态增加时自动换行，完全适配动态内容场景

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