broken-grid-and-intentional-disruption

name	broken-grid-and-intentional-disruption
description	Use when breaking the grid for emphasis. Intentional disruption draws the eye; accidental breaks read as messy.

Broken Grid and Intentional Disruption

Breaking the grid is editorial signal. Pull-quote spans cols 3-9 in 8-col flow. Hero image overflows the container. Used 1x per 3 screens.

When to break

1. Hero image overflow (image breaks container, extends to viewport edge)
2. Pull-quote span (text in column 3-9, content in column 1-12)
3. Sidebar with offset (sidebar starts at col 2, not col 1)
4. Asymmetric photo placement (image in col 1-4, caption in col 7-12)
5. Section divider full-width (rule extends to viewport edge)

Frequency rule

1 grid break per 3 screens / sections. More than that → looks accidental. Less than that → grid feels rigid. The intentional break draws attention because it's rare.

How to break in CSS

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.offset-sidebar {
  margin-left: calc(100% / 12);  /* offset by 1 col */
}
.pull-quote-span {
  grid-column: 3 / 11;  /* span cols 3-10 in 12-col */
}

Where this fits in the X3 empire

Used sparingly across CardPrepAI for editorial signal.