A demonstration of modern CSS techniques.
This section is constrained to the main content column. It has a maximum width, making it easy to read on wide screens. We achieve this by placing all direct children of the `
` element into the second column of our CSS grid by default.Scroll down to see how some elements can break out of this container to span the full width of the viewport.
And we're back to the standard width. This is perfect for articles, text, and other content that would be difficult to read if it were stretched across the entire screen. The contrast between the constrained and full-width sections creates a dynamic and engaging layout.
This section's background color goes edge-to-edge, but the text inside it is still contained for readability. This is a common pattern for feature highlights or call-to-action sections.