Varendo

Grid

Arrange responsive regions without changing semantic/focus order.

FamilyfoundationLicenseApache-2.0
StandaloneAvailable

Use the web element directly without the semantic runtime.

Semantic bindingAvailable

A registered presentation adapter can bind this component to host-owned meaning and state.

Automatic adaptationNo standard recipe

The standard recipe resolver does not select this component automatically.

Import and live example

Two short labels arranged in a responsive two-column grid.

Interactive preview requires JavaScript.

View the complete example source
import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoAvatarElement,
  AeliqoBadgeElement,
  AeliqoButtonElement,
  AeliqoGridElement,
  AeliqoHeadingElement,
  AeliqoIconButtonElement,
  AeliqoLinkElement,
  AeliqoScrollAreaElement,
  AeliqoSeparatorElement,
  AeliqoSplitPaneElement,
  AeliqoStackElement,
  AeliqoSurfaceElement,
  AeliqoTextElement,
} from "@varendo/web/foundation";



registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const element = createCatalogElement<AeliqoGridElement>("aeliqo-grid", root);
		element.columns = 2;
		element.gap = 16;
		element.minItem = "small";
		for (const text of ["Left", "Right"]) {
			const item = document.createElement("span");
			item.textContent = text;
			element.append(item);
		}
	}))(root);

Purpose

Places children in the CSS grid you declare, without changing DOM or focus order. columns and minItem control how many columns fit.

When to use it

When to use a different component

Properties and defaults

minItem controls narrow-screen adaptation without removing content.

Properties, ownership, and initial values
PropertyUse and ownershipDeclared typeInitial value
columnsDefines ordered visible fields, labels, formatting, alignment, and supported column interactions.AeliqoGridColumns2
gapSets spacing between layout children using a CSS length.AeliqoGridGap16
minItemSets the minimum grid item width before layout wraps to another row.'small' | 'medium' | 'large''medium'

Events

States and failure handling

Relevant states:

Expected result: Items use the requested grid columns and remain available at small widths.

Keyboard, focus, and accessibility

Keyboard behavior:

Exposed semantics:

Responsive behavior

The item minimum controls how many columns fit. Check the smallest supported width before raising that minimum.

Style hooks

Generated TypeScript declaration

View generated declaration
export declare class AeliqoGridElement extends AeliqoFoundationElement {
    static readonly properties: {
        columns: {
            type: NumberConstructor;
        };
        gap: {
            type: NumberConstructor;
        };
        minItem: {
            attribute: string;
            type: StringConstructor;
        };
    };
    columns: AeliqoGridColumns;
    gap: AeliqoGridGap;
    minItem: 'small' | 'medium' | 'large';
    protected render(): import("lit").TemplateResult<1>;
    static readonly styles: import("lit").CSSResult[];
}

Version

This page documents the Varendo 0.6 component contract.