Grid Recipes

Grid recipes offer utility patterns for working with CSS Grid layouts in Etch.

• auto-grid: Creates a responsive grid that automatically adjusts the number of columns based on container width and predefined variables. Allows configuration of column count and "aggressiveness" for stacking on narrow screens.

• variable-grid: Defines a grid where the minimum item width is configurable, and columns auto-fit as space allows.

• grid-1 to grid-12: Creates a grid with a fixed number of equal-width columns (from 1 up to 12).

• grid-1-2, grid-1-3, grid-2-1, grid-2-3, grid-3-1, grid-3-2: Sets up two-column grids with custom fractional column sizing (e.g., 1:2, 2:3, 3:1, etc.).

• content-grid: Provides an advanced grid layout for content sections, with dedicated columns for features, max-width features, gutters, and full background elements. Useful for complex page layouts with side features or full-bleed backgrounds.