Grid

Grid lays out children in a CSS grid container.

github.com/fastygo/templ/ui

Summary

Grid lays out children in a CSS grid container.GridCol wraps one column cell inside Grid.

Use Cases

Show two KPI cards in one row

Split form label and control in two columns

Semantics

Grid root is div with grid class

GridCol root is div without default grid class

Example layout.two-col

Column A

Column B

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Grid(ui.GridProps{Class: "grid-cols-2 gap-4"}) {
		@ui.GridCol(ui.GridColProps{}) {
			@ui.Text(ui.TextProps{}, "Column A")
		}
		@ui.GridCol(ui.GridColProps{}) {
			@ui.Text(ui.TextProps{}, "Column B")
		}
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Grid(ui.GridProps{Class: "grid-cols-2 gap-4"}) {
		@ui.GridCol(ui.GridColProps{}) {
			@ui.Text(ui.TextProps{}, "Column A")
		}
		@ui.GridCol(ui.GridColProps{}) {
			@ui.Text(ui.TextProps{}, "Column B")
		}
	}
}

Example layout.three-col

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Grid(ui.GridProps{Class: "grid-cols-3 gap-4"}) {
		@ui.GridCol(ui.GridColProps{}) { A }
		@ui.GridCol(ui.GridColProps{}) { B }
		@ui.GridCol(ui.GridColProps{}) { C }
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Grid(ui.GridProps{Class: "grid-cols-3 gap-4"}) {
		@ui.GridCol(ui.GridColProps{}) { A }
		@ui.GridCol(ui.GridColProps{}) { B }
		@ui.GridCol(ui.GridColProps{}) { C }
	}
}

API

Class · string — role: style-extension

Cols · string — role: column-count; enum: 1-2|1-3|1-4