Back to skills

Container Lines

Add vertical container-size guide lines and mini corner squares for precise, structured web layouts using CSS.

Views

0

Uses

0

Updated

May 4, 2026

Author

MengTo

Skill creator

Source

MengTo/Skills
Added by Meng To
web-designui-designlayoutvisual-designcssbest-practices
PropertyValue
namecontainer-lines
descriptionAdd vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small corner-square frame details.
keywordsweb-design, ui-design, layout, visual-design, css, best-practices

Container Lines

Use When

  • A page needs subtle vertical guides that reveal the content container width.
  • A hero, section, or product page feels too loose and needs structural tension.
  • The design calls for mini corner squares, measured edges, or quiet technical framing.

Rules

  1. Draw lines at the left and right edges of the main content container.
  2. Keep lines thin: 1px with low opacity.
  3. Add mini squares at container corners or section intersections.
  4. Keep the line system consistent across sections; do not change width per section.
  5. Place lines behind content but above the page background.
  6. Disable pointer events so the guides never block UI.

Base Tokens

:root {
  --container-max: 1120px;
  --container-pad: clamp(20px, 4vw, 48px);
  --line-color: rgba(24, 24, 27, 0.14);
  --line-strong: rgba(24, 24, 27, 0.28);
  --corner-size: 6px;
}

Page Container Lines

Use pseudo-elements on the layout shell.
.container-lines {
  position: relative;
  isolation: isolate;
}

.container-lines::before,
.container-lines::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 1px;
  background: var(--line-color);
  pointer-events: none;
}

.container-lines::before {
  left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

.container-lines::after {
  right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

Corner Squares

Add four small squares to sections that need a precise measured feel.
.corner-squares {
  position: relative;
}

.corner-squares > .corner {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  background: var(--line-strong);
  pointer-events: none;
}

.corner.top-left { top: 0; left: 0; transform: translate(-50%, -50%); }
.corner.top-right { top: 0; right: 0; transform: translate(50%, -50%); }
.corner.bottom-left { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.corner.bottom-right { right: 0; bottom: 0; transform: translate(50%, 50%); }
<main class="container-lines">
  <section class="corner-squares">
    <span class="corner top-left"></span>
    <span class="corner top-right"></span>
    <span class="corner bottom-left"></span>
    <span class="corner bottom-right"></span>
    ...
  </section>
</main>

Minimal Section Wrapper

Use the same container width as the line positions.
.content-container {
  width: min(100% - (var(--container-pad) * 2), var(--container-max));
  margin-inline: auto;
}

Taste Rules

  • Use lines as structure, not decoration. They should organize the page quietly.
  • Do not add lines to every nested component; keep them at page or major-section level.
  • Mini squares should be small and exact, usually 4px to 8px.
  • Avoid bright accent colors unless the entire visual system is technical or industrial.
  • Keep container max-width and padding shared between content and guide lines.

Quick Checks

  • The vertical lines align exactly with the content container edges.
  • Corner squares sit on real container or section corners, not arbitrary positions.
  • Lines remain subtle on light and dark backgrounds.
  • Mobile still has enough padding between the line and content.
  • Guides do not intercept clicks, hovers, or text selection.