如何实现BMI限制模块的响应式布局？尝试Grid未达预期

我要实现页面中「BMI的局限性」区域的布局，尝试用Grid布局但没达到预期效果，推测是桌面端、平板端和移动端的视图差异导致不好控制。我已经把不同行分组并分别应用了Grid，相关HTML和CSS代码如下：

原始代码 #

CSS #

.ftb {
  display: grid;
  grid-template-columns: auto 250px;
  gap: 20px;
  margin: 10px;
  padding: 20px 150px 20px 50px;
}

[class*="ftbk"] {
  display: grid;
  grid-template-columns: 250px 250px;
  gap: 20px;
  justify-content: end;
  margin: 10px;
}

[class*="item-"] {
  border-radius: 10px;
  padding: 10px;
  box-shadow: 5px 5px 50px 0px rgb(231, 245, 254);
}

.ftbk2 {
  padding-right: 50px;
}

.ftbk3 {
  padding-right: 200px;
}

.diff-1 {
  padding: px;
}

.icon_tittle {
  display: grid;
  grid-template-columns: 50px 1fr;
}

.icon_tittle .material-symbols-outlined {
  padding: 0;
}


/* Icon Styles */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 200, 'opsz' 48;
}

.material-symbols-outlined {
  font-size: 24px;
  padding: 10px;
  border-radius: 50%;
}

.soup_kitchen {
  background-color: #fcddec;
  color: #f273b3;
}

.exercise {
  background-color: #f9ede0;
  color: #eb8014;
}

.sleep {
  background-color: #d8f4f7;
  color: #88dcdd;
}

.gender {
  color: #f5b39a;
}

.age {
  color: #aee8e7;
}

.muscle {
  color: #c598f2;
}

.pregnancy {
  color: #fde998;
}

.race {
  color: #f699c4;
}

HTML #

<div class="ftb">
  <div class="diff-1">
    <h2>Limitations of BMI</h2>
    <p>Although BMI is often a practical indicator of healthy weight, it is not suited for every person. Specific groups should carefully consider their BMI outcomes, and in certain cases, the measurement may not be beneficial to use.</p>
  </div>
  <div class="item-2">
    <div class="icon_tittle">
      <div><span class="material-symbols-outlined gender">woman</span></div>
      <h4>Gender</h4>
    </div>
    <p>The development and body fat composition of girls and boys vary with age. Consequently, a child's age and gender are considered when evaluating their BMI.</p>
  </div>
</div>
<div class="ftbk2">
  <div class="item-3">
    <div class="icon_tittle">
      <div><span class="material-symbols-outlined age">cake</span></div>
      <h4>Age</h4>
    </div>
    <p>In aging individuals, increased body fat and muscle loss may cause BMI to underestimate body fat content.</p>
  </div>
  <div class="item-4">
    <div class="icon_tittle">
      <div><span class="material-symbols-outlined muscle">sports_gymnastics</span></div>
      <h4>Muscle</h4>
    </div>
    <p>BMI may misclassify muscular individuals as overweight or obese, as it doesn't differentiate muscle from fat.</p>
  </div>
</div>
<div class="ftbk3">
  <div class="item-5">
    <div class="icon_tittle">
      <div><span class="material-symbols-outlined pregnancy">pregnancy</span></div>
      <h4>Pregnancy</h4>
    </div>
    <p>Expectant mothers experience weight gain due to their growing baby. Maintaining a healthy pre-pregnancy BMI is advisable to minimize health risks for both mother and child.</p>
  </div>
  <div class="item-6">
    <div class="icon_tittle">
      <div><span class="material-symbols-outlined race">directions_run</span></div>
      <h4>Race</h4>
    </div>
    <p>Certain health concerns may affect individuals of some Black and Asian origins at lower BMIs than others. To learn more, it is advised to discuss this with your GP or practice nurse.</p>
  </div>
</div>

视图效果说明 #

• 桌面端：左侧显示标题和说明文本，右侧依次排列「性别」「年龄+肌肉量」「怀孕+种族」卡片组，整体右对齐
• 平板端：卡片组开始堆叠，布局适配中等尺寸屏幕
• 移动端：所有元素垂直堆叠，宽度占满屏幕

优化解决方案 #

核心调整思路 #

1. 用单个主Grid容器统一包裹所有元素，避免拆分多个容器导致的对齐混乱
2. 新增媒体查询，针对不同屏幕尺寸动态调整Grid列数、间距和内边距
3. 修复无效CSS属性，统一类名命名规则，提升代码可维护性

修改后的代码 #

CSS

/* 主容器：基础Grid布局 */
.bmi-limitations-container {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 20px;
  margin: 10px;
  padding: 20px 50px;
}

/* 卡片组容器：默认两列布局 */
.card-group {
  display: grid;
  grid-template-columns: repeat(2, 250px);
  gap: 20px;
  grid-column: 2;
  margin: 10px 0;
}

/* 卡片通用样式 */
.bmi-card {
  border-radius: 10px;
  padding: 10px;
  box-shadow: 5px 5px 50px 0px rgb(231, 245, 254);
}

/* 标题区域：占据右侧所有卡片的高度，保持布局对齐 */
.intro-section {
  grid-row: 1 / span 3;
}

.icon-title {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
}

.icon-title .material-symbols-outlined {
  padding: 0;
}

/* 图标样式 */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 200, 'opsz' 48;
  font-size: 24px;
  padding: 10px;
  border-radius: 50%;
}

.gender { background-color: #fcddec; color: #f273b3; }
.age { background-color: #f9ede0; color: #eb8014; }
.muscle { background-color: #d8f4f7; color: #88dcdd; }
.pregnancy { background-color: #f5b39a; color: #f5b39a; }
.race { background-color: #aee8e7; color: #aee8e7; }

/* 平板端适配（768px-1024px） */
@media (max-width: 1024px) {
  .bmi-limitations-container {
    grid-template-columns: 1fr;
    padding: 20px 30px;
  }
  .card-group {
    grid-column: 1;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    justify-content: center;
  }
  .intro-section {
    grid-row: auto;
    margin-bottom: 20px;
  }
}

/* 移动端适配（<=767px） */
@media (max-width: 767px) {
  .card-group {
    grid-template-columns: 1fr;
  }
}

HTML

<div class="bmi-limitations-container">
  <div class="intro-section">
    <h2>BMI的局限性</h2>
    <p>虽然BMI通常是衡量健康体重的实用指标，但并非适用于所有人。特定人群应谨慎看待BMI结果，在某些情况下，该测量指标可能并无参考价值。</p>
  </div>
  
  <div class="card-group">
    <div class="bmi-card">
      <div class="icon-title">
        <div><span class="material-symbols-outlined gender">woman</span></div>
        <h4>性别</h4>
      </div>
      <p>女孩和男孩的发育情况与体脂成分随年龄变化不同。因此，评估儿童的BMI时需要考虑其年龄和性别。</p>
    </div>
  </div>
  
  <div class="card-group">
    <div class="bmi-card">
      <div class="icon-title">
        <div><span class="material-symbols-outlined age">cake</span></div>
        <h4>年龄</h4>
      </div>
      <p>对于老年人，体脂增加和肌肉量减少可能导致BMI低估体脂含量。</p>
    </div>
    <div class="bmi-card">
      <div class="icon-title">
        <div><span class="material-symbols-outlined muscle">sports_gymnastics</span></div>
        <h4>肌肉量</h4>
      </div>
      <p>BMI可能将肌肉发达的人误归类为超重或肥胖，因为它无法区分肌肉和脂肪。</p>
    </div>
  </div>
  
  <div class="card-group">
    <div class="bmi-card">
      <div class="icon-title">
        <div><span class="material-symbols-outlined pregnancy">pregnancy</span></div>
        <h4>怀孕</h4>
      </div>
      <p>孕妇会因胎儿生长而体重增加。建议保持健康的孕前BMI，以降低母婴健康风险。</p>
    </div>
    <div class="bmi-card">
      <div class="icon-title">
        <div><span class="material-symbols-outlined race">directions_run</span></div>
        <h4>种族</h4>
      </div>
      <p>某些健康问题可能在较低的BMI时就影响黑人和亚裔群体。如需了解更多，建议咨询家庭医生或执业护士。</p>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Code With Me