Files
nexus/wiki/concepts/Layout-Framework.md
2026-05-03 05:42:12 +08:00

1.4 KiB
Raw Blame History

title, type, tags, sources, last_updated
title type tags sources last_updated
Layout Framework concept
css
layout
responsive
grid
flexbox
design-ux-architect.md
2026-04-24

Definition

Layout Framework 是基于 CSS Grid 和 Flexbox 的响应式布局系统,定义容器、网格、间距和断点规范,为开发者提供可信赖的实现基础。

Container System

  • Mobile全宽16px padding
  • Tablet768px max-width居中
  • Desktop1024px max-width居中
  • Large1280px max-width居中
.container {
  width: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

Grid Patterns

.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

@media (max-width: 768px) {
  .grid-2-col {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

Component Hierarchy

  1. Layout Componentscontainers, grids, sections
  2. Content Componentscards, articles, media
  3. Interactive Componentsbuttons, forms, navigation
  4. Utility Componentsspacing, typography, colors

Sources