Skip to content

Pile Class

0phoff edited this page Nov 21, 2023 · 3 revisions

This class creates a CSS grid for you to place content in. Each child of your component will be placed in the same area, on top of each other. This allows you to more easily place content relative to each other.

HINT
The pile layout is a default layout with this .pile class added to the ::content:: slot wrapper.

Variables

/

CSS

/* Base Styling */
 .pile {
    display: grid;
    grid-template-areas: "pile";

    & > * {
        grid-area: pile;
    }
}

/* Overridable Styling */
:where(.pile) {
    place-content: center;
    place-items: center;
}