如何让单排Grid布局适配移动端及小屏幕，实现响应式换行

你的问题出在固定列数的硬编码设置上：grid-template-columns: auto auto auto auto auto强制了5列布局，无论屏幕宽度如何都会维持单行，自然无法触发换行。用Grid实现响应式换行，只需要改用repeat(auto-fit, minmax(...))语法即可，这是Grid布局实现自适应的标准方案。

修改步骤 #

1. 替换网格列配置：把固定的5列设置改成grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
   • auto-fit：让浏览器根据容器宽度自动计算能容纳的列数
   • minmax(220px, 1fr)：限制每个网格项最小宽度为220px，剩余空间自动平分给各列
2. 优化图片响应式：给图片添加缩放规则，防止超出网格项范围
3. 修复HTML语法错误：最后一个<button>标签未闭合，会导致布局异常

修改后的完整代码 #

HTML（修复闭合问题） #

<div class="home-grid-container">
  <div class="home-grid-container__slide">
    <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf33category.jpg" alt="CF-33 Product" title="CF-33 Product Category"></a>
    <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33">Panasonic CF-33</a></button>
  </div>
  <div class="home-grid-container__slide">
    <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf54category.jpg" alt="CF-54 Product" title="CF-54 Product Category"></a>
    <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-54</a></button>
  </div>
  <div class="home-grid-container__slide">
    <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf31category.jpg" alt="Cf-31 Product" title="CF-31 Product Category"></a>
    <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31">Panasonic CF-31</a></button>
  </div>
  <div class="home-grid-container__slide">
    <a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1"><img src="https://www.bobjohnson.com/product_images/uploaded_images/fzg1category.jpg" alt="FZ-G1 Product" title="FZ-G1 Product Category"></a>
    <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1">Panasonic FZ-G1</a></button>
  </div>
  <div class="home-grid-container__slide">
    <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-53"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf53category.jpg" alt="CF-53 Product" title="CF-53 Product Category"></a>
    <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-53</a></button>
  </div>
</div>

CSS（实现响应式Grid） #

.home-grid-container {
    background-color: #fff;
    display: grid;
    /* 替换为响应式列配置 */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    justify-content: center;
    gap: 15px; /* 统一行列间距，比单独设置column-gap更灵活 */
    padding: 1rem; /* 给容器加内边距，防止边缘内容贴边 */
}

.home-grid-container h3 {
    color: #1f588f;
    font-weight: 700;
    font-size: 15px;
    margin: 0;
    text-align: center;
    vertical-align: top;
}

.home-grid-container a {
    text-decoration: none;
    color: #fff;
}

.home-grid-container a:visited {
    color: #fff;
}

.home-grid-container button {
    margin: 1rem 0;
}

.home-grid-container__slide {
    max-height: 300px;
    max-width: 300px;
    text-align: center; /* 让图片和按钮居中 */
}

.home-grid-container__slide img {
    max-width: 100%;
    height: auto; /* 图片响应式缩放 */
}

.homepage-category-button {
    width: 12rem;
}

额外优化建议 #

如果需要在特定屏幕宽度下强制固定列数，可以配合媒体查询：

@media (max-width: 768px) {
    .home-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

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