Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
2 replies
loste

How to center grid content in the middle?

hello,
i have 3 elements that should actually be in one line next to each other with the following grid template... but it doesn't work as intended, if i remove the layout-right element it works. but only the layout-left is next to the content

any suggestions for a solution?

here is my code:
@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;
        }
    }
}


image:
            <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>
image.png
Was this page helpful?