CSS网格布局生成器

• 布局概述

  • 容器选择器为 .article-layout
  • 默认移动端单列，平板及以上为两列自适应等宽布局
  • 网格间距为 24px
  • 网格轨道与单元内容均左对齐
  • 代码采用移动优先策略，便于扩展和维护

• HTML结构

  文章标题 1

  简要摘要内容……

  文章标题 2

  简要摘要内容……

  文章标题 3

  简要摘要内容……

  文章标题 4

  简要摘要内容……

  文章标题 5

  简要摘要内容……

  文章标题 6

  简要摘要内容……

• CSS代码 /* 核心网格容器 / .article-layout { / 启用网格 */ display: grid;

  /* 移动优先：单列 */ grid-template-columns: 1fr;

  /* 网格项目间距 */ gap: 24px;

  /* 轨道对齐（容器内左对齐） / justify-content: start; / 水平方向：从左开始排布网格轨道 / align-content: start; / 垂直方向：从上开始排布网格轨道 */

  /* 单元内项目对齐（内容左上对齐） */ justify-items: start; align-items: start; }

  /* 可选：网格子项的基础结构（非必需） / .article-card { / 使卡片内容与容器间距协同，避免内容紧贴边缘 */ padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }

• 响应式处理 /* 断点说明：

  • 移动端（默认）：1 列
  • ≥ 600px：2 列等宽 如需调整断点或列数，可修改 min-width 或 repeat 的值 / @media (min-width: 600px) { .article-layout { / 两列自适应（等分可伸缩列） */ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

• 使用说明

  • 将 .article-layout 应用于作为网格容器的外层元素，内部每个网格项使用一个块级元素（例如 article、div 等）
  • 默认移动端为单列，屏幕宽度达到 600px 时自动切换为两列
  • 如需更改断点：
    • 修改媒体查询中的 600px
  • 如需调整列数或列宽：
    • 两列固定：repeat(2, minmax(0, 1fr))（当前方案）
    • 若需更具弹性的列宽（但本需求为两列固定），可改用 auto-fit/auto-fill + minmax，但会突破两列限制
  • 间距调整：
    • 修改 .article-layout 中的 gap 值（当前为 24px）
  • 左对齐策略：
    • justify-content: start 保证网格轨道靠左
    • justify-items: start 保证每个单元内容靠左
  • 浏览器支持：
    • 使用 gap 和现代 Grid 语法，适配主流现代浏览器
    • 无需供应商前缀。若需兼容极旧浏览器，请另行准备降级方案（非本方案范围）

布局概述

• 采用 CSS Grid 构建的 4 列固定宽度商品网格，列与行的间距分别为 16px（列间距）和 12px（行间距）
• 网格整体水平居中对齐，卡片宽度固定，保证视觉整齐
• 提供多断点响应式：在较窄屏幕下依次降为 3 列、2 列、1 列，保持良好可读性
• 使用 CSS 自定义属性管理列宽与间距，便于复用与维护

HTML结构

<section class="product-section">
  <div class="product-grid">
    <div class="product-item">Item 1</div>
    <div class="product-item">Item 2</div>
    <div class="product-item">Item 3</div>
    <div class="product-item">Item 4</div>
    <div class="product-item">Item 5</div>
    <div class="product-item">Item 6</div>
    <div class="product-item">Item 7</div>
    <div class="product-item">Item 8</div>
    <!-- 根据需要继续添加 .product-item -->
  </div>
</section>

CSS代码

/* 基础变量：固定列宽与间距，便于全局复用与快速调整 */
:root {
  --pg-col-width: 260px;   /* 固定列宽，可按需修改为 240/280 等 */
  --pg-row-gap: 12px;      /* 行间距 */
  --pg-col-gap: 16px;      /* 列间距 */
}

.product-grid {
  display: grid;

  /* 4 列固定宽度（桌面端） */
  grid-template-columns: repeat(4, var(--pg-col-width));

  /* 网格间距：行 12px，列 16px */
  gap: var(--pg-row-gap) var(--pg-col-gap);

  /* 将网格轨道在可用空间内水平居中 */
  justify-content: center;

  /* 轻微内边距，避免两侧贴边（可选） */
  padding-inline: 8px;

  /* 默认行为：按行填充 */
  grid-auto-flow: row;
}

/* 仅用于示例的最小化展示样式（非布局必需，可移除） */
.product-item {
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

/* 响应式断点：多设备适配
   说明：在保证“固定列宽”的前提下，通过减少列数来适配屏幕宽度。
*/

/* ≤ 1200px：3 列 */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, var(--pg-col-width));
  }
}

/* ≤ 992px：2 列 */
@media (max-width: 992px) {
  .product-grid {
    grid-template-columns: repeat(2, var(--pg-col-width));
  }
}

/* ≤ 576px：1 列
   小屏下采用单列，保持卡片可读性。
   若担心极小屏（小于固定列宽）产生横向溢出，可在此对列宽做上限限制。
*/
@media (max-width: 576px) {
  .product-grid {
    /* 单列时网格仍居中 */
    justify-content: center;

    /* 两种方案二选一：
       A. 保持固定列宽（默认 260px），屏幕比列宽更窄时可能会轻微溢出
          grid-template-columns: var(--pg-col-width);

       B. 在单列下对固定列宽加上 100% 上限，避免溢出（推荐）
    */
    grid-template-columns: min(100%, var(--pg-col-width));
  }
}

响应式处理

• 列数递减策略：≥1200px 为 4 列；<1200px 为 3 列；<992px 为 2 列；<576px 为 1 列
• 小屏单列时使用 min(100%, var(--pg-col-width))，在保留“固定列宽”的前提下避免超小屏溢出
• 通过 justify-content: center 保证不同屏幕宽度下网格整体水平居中

使用说明

• 将容器元素设置为 .product-grid，网格项为容器的直接子元素（如 .product-item）
• 通过修改 :root 中的 --pg-col-width 可快速变更固定列宽，例如 240px 或 280px
• 根据项目设计可调整断点阈值（1200/992/576 为常用分界）
• 若需统一控制间距，可修改 --pg-row-gap 与 --pg-col-gap
• 建议在构建流程中使用 Autoprefixer 确保各浏览器的最佳兼容性
• 本方案侧重网格布局与响应式列数控制，卡片的视觉样式可按项目需求自行扩展