Main Content Area
The holy grail layout is one of the most well-known CSS layout challenges. It consists of a full-width header and footer, with three columns between them. The center column contains the main content, flanked by two fixed-width sidebars.
With CSS Grid, this layout becomes trivial to implement. We define grid-template-areas to name each region, then assign elements to those areas. The center column uses 1fr to fill remaining space, while sidebars have fixed widths.
This implementation uses grid-template-columns: 220px 1fr 220px to create the three-column structure. On screens narrower than 900px, the layout switches to a single column stack, reordering the grid areas vertically.
The beauty of CSS Grid is that the source order doesn't need to match the visual order. We can place the main content first in the HTML for accessibility and SEO, then position it visually wherever we want using grid-area assignments.
Additional paragraph to demonstrate content flow. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.