CSS Grid响应式布局问题：桌面端图片未横向排列，求修改方案

问题描述 #

我尝试用CSS Grid构建响应式布局：

• 桌面及笔记本设备：3组（图片+下方描述文本）水平等距排列
• 移动设备：图片及对应文本垂直堆叠

但当前代码在桌面端仍呈现垂直堆叠效果，不符合需求，求指出修改方向。

我尝试的代码 #

HTML #

<section class="responsive-grid">
  <div class="grid-item">
    <img src="greek salad1.jpg" alt="Description 1" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia ex
      repellendus quia quibusdam unde quis laborum modi iste asperiores
      velit inventore, id animi doloremque eaque nostrum consequatur,
      laudantium veniam possimus!.
    </p>
  </div>
  <div class="grid-item">
    <img src="greek-salad.png" alt="Description 2" />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti
      doloremque at numquam error magnam, consectetur explicabo fuga, illo
      dolore saepe ullam excepturi reprehenderit ducimus ratione enim eos
      quod perspiciatis ab?.
    </p>
  </div>
  <div class="grid-item">
    <img src="TDelight.png" alt="Description 3" />
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quaerat
      consequatur quia blanditiis dolor nihil, minus ad fuga incidunt rerum
      vero quae rem iusto est, reprehenderit, debitis ea cum molestiae?.
    </p>
  </div>
</section>

CSS #

/* Mobile-first: Default to a single vertical column */
.responsive-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column stack */
  gap: 2rem; /* Even space between items vertically */
  padding: 1rem;
}

/* Ensure images fit within their containers */
.grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Desktop: Switch to 3 horizontal columns for larger screens (e.g., 768px+) */
@media (min-width: 768px) {
  .responsive-grid {
    /* Create three equal-width columns */
    grid-template-columns: repeat(3, 1fr);

    /* Optional: Distribute space evenly between columns */
    justify-content: space-between;
  }
}

修复方案 #

你的代码逻辑本身是正确的，出现桌面端仍垂直堆叠的情况，大概率是以下原因之一，对应修改即可：

• 断点宽度设置过小：768px通常是平板的最小宽度，桌面设备屏幕宽度普遍更大，建议将媒体查询的断点调整为1024px，确保桌面设备能触发水平布局：

  @media (min-width: 1024px) {
    .responsive-grid {
      grid-template-columns: repeat(3, 1fr);
      /* 可移除justify-content: space-between，因为repeat(3,1fr)已让三列等宽占满容器，gap负责间距 */
    }
  }
  

• CSS规则被覆盖：检查是否存在其他优先级更高的CSS规则（比如带!important的声明、更具体的选择器）覆盖了grid-template-columns，如果有，调整选择器优先级或移除冲突规则。

• 浏览器缓存问题：强制刷新浏览器（Ctrl+F5），确保加载最新的CSS文件，避免旧代码缓存导致的布局异常。

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