How to center grid content in the middle?

@layer components {
    .layout-grid {
        display: grid;
        grid-template-columns: [full-start] 1fr [left-start] 180px [content-start] 640px [content-end] 180px [right-end] 1fr [full-end];
        grid-template-areas:
            '. left content right .'
            'full full full full full';

        & > * {
            grid-column: content;
        }

        & > .layout-full {
            grid-column: full;
        }

        & > .layout-left {
            grid-column: left-start / content-start;
        }

        & > .layout-right {
            grid-column: content-end / right;
        }
    }
}

            <div className="layout-grid">
                <div className="layout-left h-24 bg-red-600">example</div>

                <div className="layout-right h-24 bg-red-600">example2</div>
                <div className="h-24 bg-red-400">example2</div>
            </div>