Grid

React API

Container

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

  Oletusarvo: "div" as E

• center

  Automaattinen keskitys

  Tyyppi: boolean

  Oletusarvo: true

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• fluid

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

  Tyyppi: boolean

• gx

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

  Tyyppi: GapSize

• maxWidth

  Container-elementin maksimileveys

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

• testId

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

  Tyyppi: string

Row

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

  Oletusarvo: "div" as E

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• cols

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

  Tyyppi: ColumnSize

• gx

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

  Tyyppi: GapSize

• gy

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

  Tyyppi: GapSize

• lg

  Palstojen leveys lg-breakpointille

  Tyyppi: ColumnSize

• md

  Palstojen leveys md-breakpointille

  Tyyppi: ColumnSize

• sm

  Palstojen leveys sm-breakpointille

  Tyyppi: ColumnSize

• testId

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

  Tyyppi: string

• xl

  Palstojen leveys xl-breakpointille

  Tyyppi: ColumnSize

• xxl

  Palstojen leveys 2xl-breakpointille

  Tyyppi: ColumnSize

• xxxl

  Palstojen leveys 3xl-breakpointille

  Tyyppi: ColumnSize

Column

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

  Oletusarvo: "div" as E

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• col

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

  Tyyppi: ColumnSize

• lg

  Palstan leveys lg-breakpointille

  Tyyppi: ColumnSize

• md

  Palstan leveys md-breakpointille

  Tyyppi: ColumnSize

• sm

  Palstan leveys sm-breakpointille

  Tyyppi: ColumnSize

• testId

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

  Tyyppi: string

• xl

  Palstan leveys xl-breakpointille

  Tyyppi: ColumnSize

• xxl

  Palstan leveys 2xl-breakpointille

  Tyyppi: ColumnSize

• xxxl

  Palstan leveys 3xl-breakpointille

  Tyyppi: ColumnSize