Lumeo

Grid

A CSS grid layout component for creating multi-column layouts with consistent spacing.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Grid />
7
7
7
7
7
7
9
9
9
9
9
9
9
9
10
10
10
10
10
10
10
10
10

Pick a column count to see it applied live.

13
13
13
13
13
13
13
13
13
13
13
13

API Reference

Grid

Property Type Default Description
Columns int 1 Number of grid columns. Maps to grid-cols-{value}.
Gap string? "4" Uniform gap between rows and columns. Maps to gap-{value}.
RowGap string? Gap between rows only. Maps to gap-y-{value}. Overrides Gap for rows.
ColGap string? Gap between columns only. Maps to gap-x-{value}. Overrides Gap for columns.