A grid layout divides a page into a consistent system of columns, rows, and gutters (the gaps between columns). The standard is 12 columns because 12 divides evenly by 2, 3, 4, and 6 — giving you flexible options for content arrangement. Elements align to this invisible grid, creating visual order even when the content varies.
You can always tell when a page doesn't use a grid. Elements feel randomly placed. Headings don't align with the content below them. The left edge of one section doesn't match the left edge of the next. It reads as unprofessional even if the individual components look fine in isolation. Grids don't restrict creativity — they make creativity look intentional.
Grid mistakes that hurt conversions
The most common grid mistake on landing pages: inconsistent max-width. The hero is 1200px wide, the features section is 1400px, and the testimonials stretch to 1100px. Each section feels like it belongs to a different page. Pick a max-width (1200px is safe for most landing pages) and stick with it across every section.
Second mistake: ignoring the grid for CTAs. When a call-to-action button sits outside the grid's column alignment, it looks accidental — like it was placed by someone who wasn't paying attention. Even full-width CTA sections should have their inner content aligned to the page grid. Consistency in the invisible structure translates to trust in the visible experience.