搭骨架
卡片网格布局
Card Grid Layout
「卡片墙布局」「规则卡片网格」「案例卡片列表」「模板库排版」
LIVE DEMO真实可交互，动手试试
Pricing
转化区块
Testimonial
用户口碑
Feature
功能说明
Gallery
案例展示
- 英文名
- Card Grid Layout
- 别名 · 俗称
- 卡片墙规则网格卡片卡片列表布局
- Web 叫法
- Card Grid Layout
- 大白话定义
- 用规则行列排列同类卡片，并随屏幕宽度自动换列的页面结构，适合模板库、商品列表和案例集。
- 部位拆解
- 网格容器 Grid负责列数、间距和换行
- 卡片项 Cards承载同类内容的重复模块
- 响应式列数 Columns根据屏幕宽度调整展示密度
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
做一个卡片网格布局（Card Grid Layout）：桌面端 3 列、平板 2 列、手机 1 列，卡片高度统一，间距固定
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的卡片网格布局（Card Grid Layout）。逐一排除：列宽计算不稳导致最后一列掉下去；卡片高度差异太大；小屏没有自动降列；间距在不同断点不一致。症状是：