framed-grid-layout

name	framed-grid-layout
description	创建极简的框选网格布局，带有可见的细边界线、L 形角标、微妙的斜线纹理与严格的区块对齐。当需要干净、中性、精准、结构化、编辑排版风、技术感或带引导边框的网页布局时使用。

Framed Grid Layout

何时使用

• 页面需要干净的技术结构，带可见的区块边界。
• 内容应显得精准、有条理、编辑排版风或系统化。
• 设计需要细引导边框、L 形角标与一致的框选盒子。

布局规则

1. 先定义父网格；让每个区块都吸附到相同的列与行。
2. 全页统一使用一种边框色、一种角标色与一套间距刻度。
3. 让框保持矩形且精准。避免悬浮卡片、柔和团块与不均匀的外边距。
4. 使用细线：1px 边框、低对比分隔线与微妙的角标记。
5. 以极低不透明度添加斜线背景纹理；它应只读作表面的张力。
6. 让区块内边距、标题、控件与媒体边缘对齐到同一网格节奏。
7. 用一致的间隙分隔区块，而非随意的留白。

基础令牌

使用中性色，并按主题调节对比。

:root {
  --fg-bg: #f7f7f4;
  --fg-surface: rgba(255, 255, 255, 0.62);
  --fg-line: rgba(24, 24, 27, 0.14);
  --fg-line-strong: rgba(24, 24, 27, 0.34);
  --fg-texture: rgba(24, 24, 27, 0.035);
  --fg-gap: 16px;
  --fg-pad: clamp(16px, 2vw, 28px);
  --fg-corner: 18px;
}

父网格

用父网格来强制纵向与横向的对齐。

.framed-grid {
  min-height: 100vh;
  padding: var(--fg-gap);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      var(--fg-texture) 11px 12px
    ),
    var(--fg-bg);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--fg-gap);
}

.framed-grid > * {
  min-width: 0;
}

框选区块

每个区块使用相同的盒模型、线宽与内边距。

.frame {
  position: relative;
  border: 1px solid var(--fg-line);
  background: var(--fg-surface);
  padding: var(--fg-pad);
  overflow: hidden;
}

.frame + .frame {
  margin-top: 0;
}

L 形角标

使用背景图层，让角标无需额外标记即可保持清晰。

.frame-brackets {
  background:
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left top / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left top / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right top / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right top / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left bottom / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left bottom / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right bottom / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right bottom / 1px var(--fg-corner) no-repeat,
    var(--fg-surface);
}

区块跨度

相比临时宽度，优先使用显式的网格跨度。

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }

@media (max-width: 760px) {
  .framed-grid {
    grid-template-columns: 1fr;
  }

  .span-12,
  .span-8,
  .span-6,
  .span-4 {
    grid-column: 1 / -1;
  }
}

示例

<main class="framed-grid">
  <section class="frame frame-brackets span-12">...</section>
  <section class="frame frame-brackets span-8">...</section>
  <aside class="frame frame-brackets span-4">...</aside>
  <section class="frame frame-brackets span-6">...</section>
  <section class="frame frame-brackets span-6">...</section>
</main>

审美准则

• 即便框内内容各异，也要让框对齐到父网格。
• 仅当产品风格需要时才使用直角或轻微圆角。
• 不要在相邻框中混用不同的边框粗细。
• 不要添加厚重阴影；可见的框就是结构本身。
• 保持斜线纹理的不透明度低于 0.05。
• 在所有主要区块中一致地重复相同的角标尺寸。

快速检查

• 区块边缘在纵向与横向上对齐。
• 每个框都使用相同的边框、内边距与角标刻度。
• 框之间的间隙在桌面端与移动端保持一致。
• 斜线纹理只有近看时才可见。
• 即便移除纹理层，布局仍能清晰读通。