Back to Details

framed-grid-layout

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Framed Grid Layout

带框网格布局

Use When

适用场景

  • A page needs a clean technical structure with visible section boundaries.
  • Content should feel precise, organized, editorial, or system-like.
  • The design calls for thin guide borders, L-shaped corner brackets, and consistent framed boxes.
  • 页面需要具备清晰区块边界的简洁技术结构时。
  • 内容需要呈现出精准、规整、编辑风格或系统感时。
  • 设计要求使用细引导边框、L形角括号和统一带框容器时。

Layout Rules

布局规则

  1. Define the parent grid first; make every section snap to the same columns and rows.
  2. Use one border color, one corner bracket color, and one spacing scale across the page.
  3. Keep frames rectangular and precise. Avoid floating cards, soft blobs, and uneven margins.
  4. Use thin lines: 
    1px
    borders, low-contrast dividers, and subtle bracket marks.
  5. Add diagonal background texture at very low opacity; it should read only as surface tension.
  6. Align section padding, headings, controls, and media edges to the same grid rhythm.
  7. Separate sections with consistent gaps, not random whitespace.
  1. 首先定义父级网格；确保每个区块都对齐到相同的列和行。
  2. 页面统一使用一种边框颜色、一种角括号颜色和一种间距比例。
  3. 保持容器为矩形且精准。避免浮动卡片、柔和不规则形状和不均匀边距。
  4. 使用细线：
    1px
    边框、低对比度分隔线和柔和的角括号标记。
  5. 添加极低透明度的斜向背景纹理；仅作为表面质感存在，不宜过于显眼。
  6. 区块内的内边距、标题、控件和媒体边缘都要对齐到相同的网格节奏。
  7. 使用统一间距分隔区块，避免随机留白。

Base Tokens

基础变量

Use neutral colors and tune contrast per theme.
css
: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;
}
使用中性色调，并根据主题调整对比度。
css
: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;
}

Parent Grid

父级网格

Use the parent grid to enforce vertical and horizontal alignment.
css
.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;
}
使用父级网格确保垂直和水平方向的对齐。
css
.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;
}

Framed Section

带框区块

Each section gets the same box model, line weight, and padding.
css
.frame {
  position: relative;
  border: 1px solid var(--fg-line);
  background: var(--fg-surface);
  padding: var(--fg-pad);
  overflow: hidden;
}

.frame + .frame {
  margin-top: 0;
}
每个区块使用相同的盒模型、线条粗细和内边距。
css
.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-Shaped Corner Brackets

L形角括号

Use background layers so brackets stay crisp without extra markup.
css
.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);
}
使用背景层实现角括号，无需额外标记，保持简洁。
css
.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);
}

Section Spans

区块跨度

Prefer explicit grid spans over ad hoc widths.
css
.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;
  }
}
优先使用明确的网格跨度，而非临时设置宽度。
css
.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;
  }
}

Example

示例

html
<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>
html
<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>

Taste Rules

风格规则

  • Keep frames aligned to the parent grid even when content inside varies.
  • Use square or lightly rounded corners only if the product style requires it.
  • Do not mix different border weights in adjacent frames.
  • Do not add heavy shadows; the visible frame is the structure.
  • Keep diagonal texture below 
    0.05
    opacity.
  • Repeat corner bracket size consistently across all major sections.
  • 即使区块内内容不同，也要保持容器对齐到父级网格。
  • 仅当产品风格要求时，才使用方形或轻微圆角。
  • 相邻容器不要混合使用不同粗细的边框。
  • 不要添加厚重阴影；可见的容器本身就是结构。
  • 斜向纹理的透明度保持在
    0.05
    以下。
  • 所有主要区块的角括号大小保持一致。

Quick Checks

快速检查

  • Section edges line up vertically and horizontally.
  • Every frame uses the same border, padding, and corner bracket scale.
  • Gaps between frames are consistent on desktop and mobile.
  • The diagonal texture is visible only on close inspection.
  • The layout still reads clearly if the texture layer is removed.
  • 区块边缘在垂直和水平方向对齐。
  • 每个容器使用相同的边框、内边距和角括号比例。
  • 桌面端和移动端的容器间距保持一致。
  • 斜向纹理仅在近距离查看时可见。
  • 即使移除纹理层，布局依然清晰可读。