Kevin Powell - Community•3mo ago

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;
        }
    }
}

@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>

            <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>

2 Replies

Mannix•3mo ago

put the middle one in the middle in the html or tell all of them to be in the first row

loste•3mo ago

wow you are a genius, i didn't even think about putting it in the middle, but it makes sense! thanks!

Gaming

Programming

How to center grid content in the middle?