Grid System

A Grid System is a framework of horizontal and vertical lines used to structure and organize content on a webpage or app. It divides the page into columns and rows to ensure consistency in layout, alignment, and spacing. Grid systems help designers create balanced, organized designs that are easy to navigate and visually appealing.

A grid system is the scaffolding that makes layout decisions systematic rather than arbitrary. When your team shares a grid, engineers can implement designs accurately without guessing, and designers can create new screens that align with existing ones without starting from scratch. For web products, using a standard 12-column grid also ensures your designs are naturally responsive since most CSS grid frameworks are built around it.

Bootstrap's 12-column responsive grid became the foundation for millions of web applications because it made layout decisions predictable — developers knew exactly how elements would reflow at different breakpoints without custom CSS for every component.