Générateur de grille CSS (Visuel)

CSS Grid is a two-dimensional layout system that handles both columns and rows simultaneously. Flexbox is one-dimensional, working along either a row or a column axis. Grid is ideal for page-level layouts (headers, sidebars, content areas), while Flexbox excels at component-level alignment (navigation items, card contents). Most modern layouts use both together.

The fr (fraction) unit represents a fraction of the available space in the grid container. 1fr 2fr means the second column gets twice the space of the first. It is similar to flex-grow in Flexbox but designed specifically for grid tracks. fr units automatically distribute remaining space after fixed-size tracks (px, em) are allocated.

grid-template-areas lets you define your layout using named strings that visually represent the grid structure in your CSS. Instead of placing items by line numbers (grid-column: 1 / 3), you assign them by name (grid-area: header). The resulting CSS reads like an ASCII art version of your layout, making it self-documenting and easier to maintain.

The Holy Grail layout is a classic web page structure with a header spanning the full width, a three-column body (left sidebar, main content, right sidebar), and a full-width footer. It was historically difficult to achieve with CSS floats and was called the Holy Grail because a clean implementation was so elusive. CSS Grid makes it trivial.