Full-Bleed Sections within a Max-Width Grid

/* Basic HTML structure for context:
<div class="page-layout">
    <header class="page-header">Page Header</header>
    <div class="full-bleed-section">
        <div class="full-bleed-section__inner">
            <h1>Full-Bleed Section</h1>
            <p>This content is constrained, but its background goes full width.</p>
        </div>
    </div>
    <main class="page-main">Main Content</main>
    <footer class="page-footer">Page Footer</footer>
</div>
*/

body { margin: 0; font-family: sans-serif; }

.page-layout {
    display: grid;
    /* Define three columns: left full-width, center max-width content, right full-width */
    grid-template-columns:
        [full-width-start] 1fr /* Left flexible column */
        [content-start] minmax(0, 1000px) [content-end] /* Center max-width content column */
        1fr [full-width-end]; /* Right flexible column */
    gap: 20px; /* Gap between grid rows */
    padding-bottom: 40px; /* Example bottom padding */
}

.page-layout > * {
    grid-column: content-start / content-end; /* Default to content width for all direct children */
    background-color: #f0f0f0; /* Example background */
    padding: 20px; /* Example padding */
    border-radius: 5px;
}

.full-bleed-section {
    grid-column: full-width-start / full-width-end; /* Override to span full width */
    background-color: #d1e7dd; /* Distinct background for full-bleed */
    padding: 40px 0; /* Vertical padding for the full-bleed section */
    box-sizing: border-box;
    border-radius: 0; /* No border radius for full width */
}

.full-bleed-section__inner {
    max-width: 1000px; /* Re-constrain content inside full-bleed */
    margin: 0 auto; /* Center the inner content */
    padding: 0 20px; /* Add horizontal padding for smaller screens within full-bleed */
    background: none; /* No background for inner content */
}