🧱 Grid Layout — Flexible Page Structure for Craft CMS

This layout system provides a clean and flexible structure for placing Matrix Builder components on a page. It uses named CSS grid areas — content, popout, feature, and full — to define clear layout zones. Each block can be positioned simply by adding the right class, with no custom layout code required.

• ✅ Consistent layout behavior across the entire site
• 🧭 Easy control over width and visual hierarchy
• 🧩 Clean Twig templates with minimal markup
• 📱 Fully responsive out of the box

This approach lets editors and developers focus on content, not layout headaches. Whether it’s a simple text block or a wide hero image, everything snaps into place.

💡 Example zone classes

• .blocks__content → standard content width
• .blocks__popout → slightly wider, draws attention
• .blocks__feature → emphasized, wider section
• .blocks__full → edge-to-edge full width

🧭 Connecting zones

In addition to single zones, you can also span multiple layout areas to create more dynamic compositions:

• .blocks__content-to-feature → from content-start to feature-end
• .blocks__feature-to-content → from feature-start to content-end
• .blocks__content-to-full → from content-start to full-end
• .blocks__full-to-content → from full-start to content-end

These connecting zones make it easy to combine different content widths seamlessly — perfect for hero sections, feature teasers, or split layouts without extra CSS.

🚀 The result: A layout system that’s lean, modular, and easy to extend — ideal for any content-driven Craft CMS project.