import { LitElement } from "lit"; export interface SkyGridColumnsConfig { columns: number; lg: number; md: number; sm: number; xs: number; } /** * @element sky-grid * * @summary Responsive CSS grid container with configurable breakpoint column counts. * * @status stable * @since 1.0.0 * * @documentation https://sky-ui.com/components/grid * * @slot - Default slot for grid items (direct children become grid items). * @property {number} columns - Base number of grid columns. * @property {string} gap - Gap between grid items. * @property {number} lg - Column count at large breakpoints. * @property {number} md - Column count at medium breakpoints. * @property {number} sm - Column count at small breakpoints. * @property {number} xs - Column count at extra-small breakpoints. * @property {boolean} nowrap - Reuses `columns` across breakpoints when true. * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`. * * @csspart grid - The grid container element. * * @Behavior * - Uses CSS variables for runtime breakpoint column updates * - Supports explicit per-breakpoint column counts * - Supports `nowrap` mode to keep a fixed column count * * @example * ```html * * Card 1 * Card 2 * Card 3 * Card 4 * * ``` * ```vue * * ``` * ```jsx * export default function Demo() { * return ( * * Card 1 * Card 2 * Card 3 * Card 4 * * ); * } * ``` */ export declare class SkyGrid extends LitElement { /** Named prop preset from nearest `sky-config-provider`. */ preset: string; private _presets; static styles: import("lit").CSSResult; columns: number; gap: string; lg: number; md: number; sm: number; xs: number; nowrap: boolean; updated(changedProperties: Map): void; render(): import("lit-html").TemplateResult<1>; }