CSS Grid媒体查询下无法切换单列响应式布局问题

你的代码存在3个直接导致布局异常的错误：

• 媒体查询内的单位笔误：grid-template-rows: 1ft 1fr 1fr 1fr里的1ft是CSS无法识别的无效单位，会导致整条网格行定义规则被浏览器直接丢弃。
• CSS样式优先级顺序错误：你把媒体查询代码写在了.skill-col-container桌面端定位规则的前面，相同选择器的规则后写的会覆盖先写的，导致移动端下给.skill-col-container设置的网格位置属性完全不生效。
• 移动端网格配置不合理：你给移动端设置的grid-template-columns: 50%只占容器一半宽度，不符合单列铺满的需求，同时没有重置其他网格项的定位属性，容易出现元素错位。

1. 把媒体查询代码移动到所有桌面端网格样式的后面，保证移动端规则优先级更高
2. 修正笔误的单位，将无效的1ft改为1fr
3. 调整移动端网格配置为单列1fr宽度，明确指定4行结构下每个元素的位置：
   • 第一行：标题区块.p-1
   • 第二行：描述文本.p-3
   • 第三、四行：技能模块.skill-col-container（跨两行展示）
4. 保留桌面端第二列跨两行的原有配置即可。

HTML部分 #

<div class="grid-container">
  <div class="p-1">
    <span class="heading">My Journey So Far</span>
  </div>
  <div class="skill-col-container">
    <div class="skill-container">
      <div class="skills">Java</div>
      <div class="skills">UI</div>
      <div class="skills">CSS</div>
      <div class="skills">UX</div>
      <div class="skills">HTML</div>
      <div class="skills">GIT</div>
      <div class="skills">LINUX</div>
      <div class="skills">ADOBE</div>
    </div>
  </div>
  <div class="p-3">
    <p>
      Always up for a challenge, I have worked for lean start-ups and was a
      member of the first New Zealand start-up to attend Y Combinator, the
      largest start-up accelerator in the world. From there, I worked my way
      up to Art Director and Team Lead at Appster where I oversaw the design
      of 30+ mobile and desktop apps. Currently, I lead UI/UX design at SaaS
      start-up VideoMyJob.
    </p>
  </div>
</div>

CSS部分 #

.heading {
  font-size: 2.75rem;
  font-weight: 500;
}

.grid-container {
  display: grid;
  grid-template-columns: 50% 20%;
  grid-row-gap: 1rem;
  grid-column-gap: 3rem;
  margin-left: 5%;
  margin-bottom: 8rem;
}

/* 桌面端网格定位规则 */
.skill-col-container {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column: 2;
}

.skill-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
}

.skills {
  text-transform: uppercase;
  border: solid black 1px;
  width: 5rem;
  display: flex;
  justify-content: center;
  border-radius: 3.75rem;
  background-color: #ec9b3b;
}

.p-3 {
  grid-column: 1;
}

/* 移动端媒体查询放在所有桌面样式之后，保证优先级 */
@media only screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr 1fr;
    margin-right: 5%;
  }
  .p-1 {
    grid-column: 1;
    grid-row: 1;
  }
  .p-3 {
    grid-column: 1;
    grid-row: 2;
  }
  .skill-col-container {
    grid-column: 1;
    grid-row: 3 / span 2;
  }
}

优化说明：移动端标题、描述行高使用auto适配文本内容高度，避免固定行高导致文字溢出；给容器增加右侧5%外边距，和左侧边距对称，避免小屏幕下内容贴边。

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