[Demo]
№ 299
自适应网格
定义 Definition
随空间变化而调整，保持结构清晰与布局平衡。
要目 Key Points
模块跨列通过 span 控制模块占据的列数。
间隙节奏统一的 gutter 保持呼吸感与秩序。
自动填充根据可用空间自动填充列数，模块位置智能重排。
平衡布局不同模块组合，仍保持视觉平衡与节奏。
用法 Application
最小列宽不小于 120px 保证易读性；间隙一致、列宽弹性伸缩、按 span 构建层级，内容分布均衡。
关键词 Keywords
自适应网格模块跨列间隙自动填充响应式
参见 Related
易混 Confusable
回忆评估 Review
看完海报，凭回忆作答——评分后排入复习队列
实况演示
Live Demo · 真实 HTML/CSS关键 CSS fold / unfold
/* ═══ 本 demo 自定义样式 ═══ */ .rg2 { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .rg2 .it { border: 1px solid var(--line); background: var(--paper-2); } .rg2 .it .ph { aspect-ratio: 1; background: color-mix(in srgb, var(--accent) 8%, var(--paper-2)); border-bottom: 1px solid var(--line); } .rg2 .it .cap { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); padding: 5px 7px; } /* ═══ 共享令牌类 · demo 外壳已内置 ═══ */ .blk { background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line); border-radius: 2px; display: grid; place-items: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-2); padding: 10px; min-height: 34px; } .blk.acc { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); } .blk.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); } .tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; border: 1px solid var(--line); color: var(--ink-2); padding: 2px 8px; border-radius: 2px; background: var(--paper-2); } .card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .card .cv { aspect-ratio: 16/10; background: color-mix(in srgb, var(--accent) 10%, var(--paper-2)); border-bottom: 1px solid var(--line); } .card .bd { padding: 9px 10px; } .card .bd .t { font-weight: 600; font-size: 12.5px; } .card .bd .m { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; } .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--accent) 22%, var(--paper-2)); border: 1px solid var(--line); } .fake-text { height: 8px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 1px; } .fake-text.w60 { width: 60%; } .fake-text.w80 { width: 80%; } .fake-text.w40 { width: 40%; } .fake-text + .fake-text { margin-top: 6px; }
