Grid
CSS Grid контейнер с ячейками GridCol.
github.com/fastygo/templ/ui
Grid размещает дочерние элементы в CSS Grid контейнере. GridCol оборачивает одну ячейку колонки.
Две колонки
Колонка A
Колонка 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{}, "Колонка A")
}
@ui.GridCol(ui.GridColProps{}) {
@ui.Text(ui.TextProps{}, "Колонка 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{}, "Колонка A")
}
@ui.GridCol(ui.GridColProps{}) {
@ui.Text(ui.TextProps{}, "Колонка B")
}
}
}
Три колонки
A
B
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 }
}
}
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 — Utility-классы сетки (grid-cols-*, gap-*)
GridCol · component — Одна ячейка колонки внутри Grid