Grid

React API

Container

• as

  Tyyppi: ElementType

  Oletusarvo: "div" as E

  Renderöitävä HTML-elementti

• center

  Tyyppi: boolean

  Oletusarvo: true

  Automaattinen keskitys

• children

  Tyyppi: ReactNode

  Komponentin sisältö

• className

  Tyyppi: string

  CSS-apuluokat ulkoasun muokkaamiseen.

• fluid

  Tyyppi: boolean

  100 % leveä container-elementti. Voi yhdistää maxWidth-proppiin, jolloin container on 100 % leveä annettuun leveyteen asti.

• gx

  Tyyppi: GapSize

  Määrittää palstojen välisen tilan horisontaalisesti. Arvot (0 | 2 | 4 | 6 | 8) kasvavat 0.50rem (8px) välein.

• maxWidth

  Tyyppi: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"

  Container-elementin maksimileveys

• testId

  Tyyppi: string

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

Row

• as

  Tyyppi: ElementType

  Oletusarvo: "div" as E

  Renderöitävä HTML-elementti

• children

  Tyyppi: ReactNode

  Komponentin sisältö

• className

  Tyyppi: string

  CSS-apuluokat ulkoasun muokkaamiseen.

• cols

  Tyyppi: ColumnSize

  Palstojen leveys, joka ei mukaudu eri breakpointeilla. Käytä tätä, jos sama leveys toimii kaikilla breakpointeilla.

• gx

  Tyyppi: GapSize

  Määrittää palstojen välisen tilan horisontaalisesti. Arvot (0 | 2 | 4 | 6 | 8) kasvavat 0.50rem (8px) välein.

• gy

  Tyyppi: GapSize

  Määrittää palstojen välisen tilan vertikaalisesti. Arvot (0 | 2 | 4 | 6 | 8) kasvavat 0.50rem (8px) välein.

• lg

  Tyyppi: ColumnSize

  Palstojen leveys lg-breakpointille

• md

  Tyyppi: ColumnSize

  Palstojen leveys md-breakpointille

• sm

  Tyyppi: ColumnSize

  Palstojen leveys sm-breakpointille

• testId

  Tyyppi: string

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

• xl

  Tyyppi: ColumnSize

  Palstojen leveys xl-breakpointille

• xxl

  Tyyppi: ColumnSize

  Palstojen leveys 2xl-breakpointille

• xxxl

  Tyyppi: ColumnSize

  Palstojen leveys 3xl-breakpointille

Column

• as

  Tyyppi: ElementType

  Oletusarvo: "div" as E

  Renderöitävä HTML-elementti

• children

  Tyyppi: ReactNode

  Komponentin sisältö

• className

  Tyyppi: string

  CSS-apuluokat ulkoasun muokkaamiseen.

• col

  Tyyppi: ColumnSize

  Palstan leveys, joka ei mukaudu eri breakpointeilla. Käytä tätä, jos sama leveys toimii kaikilla breakpointeilla.

• lg

  Tyyppi: ColumnSize

  Palstan leveys lg-breakpointille

• md

  Tyyppi: ColumnSize

  Palstan leveys md-breakpointille

• sm

  Tyyppi: ColumnSize

  Palstan leveys sm-breakpointille

• testId

  Tyyppi: string

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

• xl

  Tyyppi: ColumnSize

  Palstan leveys xl-breakpointille

• xxl

  Tyyppi: ColumnSize

  Palstan leveys 2xl-breakpointille

• xxxl

  Tyyppi: ColumnSize

  Palstan leveys 3xl-breakpointille