Column Class

This class creates a CSS grid for you to place content in. Each child of your component will be placed in a separate, equally sized, column. You can use the grid-column CSS property to change the placement and number of columns each child uses.

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

Variables

/

CSS

/* Base Styling */
.column {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

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