# Grid

Source: https://lumeo.nativ.sh/components/grid

# Grid

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

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Grid />

Preview Code

Basic 3-Column

7

7

7

7

7

7

Preview Code

Responsive Columns

9

9

9

9

9

9

9

9

Preview Code

Different Gaps

10

10

10

10

10

10

10

10

10

Preview Code

Columns — interactive

Pick a column count to see it applied live.

1 col2 cols3 cols4 cols6 cols

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.