Askr documentation
Generated API snapshot

@askrjs/themes/grid

Exports from the declarations published in @askrjs/themes. Signatures reflect the published artifact.

Exports

This entrypoint publishes 5 exports. Use the anchored symbol rows for direct links. Type-only exports are labeled separately from runtime values.

Gridtype

Grid: <TElement extends GridElement = "div">(props: GridProps<TElement>) => JSX.Element

CSS grid layout primitive: turns columns/gap/align (each optionally responsive) into generated grid-template styles, rendering as <div> by default.

GridAligntype

GridAlign: "start" | "center" | "end" | "stretch"

align-items value applied to a {@link Grid }.

GridColumnstype

GridColumns: number | string

Column definition for {@link Grid }: a track count or a raw grid-template-columns string.

GridElementtype

GridElement: "div" | "section" | "ul"

Element tags {@link Grid } can render as via its as prop.

GridPropstype

GridProps: GridIntrinsicProps<TElement> & {
  as?: TElement;
  columns?: ResponsiveValue<GridColumns>;
  gap?: ResponsiveValue<BlockSpace>;
  align?: ResponsiveValue<GridAlign>;
  children?: unknown;
  ref?: Ref<HTMLElement>;
}

Props for the {@link Grid } component, specialized for a given {@link GridElement} TElement.

align
align?: ResponsiveValue<GridAlign> | undefined;
as
as?: TElement | undefined;
children
children?: unknown;
columns
columns?: ResponsiveValue<GridColumns> | undefined;
gap
gap?: ResponsiveValue<BlockSpace> | undefined;
ref
ref?: Ref<HTMLElement>;