Grid

Container, Row ja Column -komponentit sivun palstarakenteiden toteutukseen.

Julkaistu versiossa 0.15.3

HTML

Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta Käyttö ilman Reactia.

Esikatselu

Container-elementin maksimileveys

Palstojen toteuttaminen

Palstojen välisen tilan asettaminen responsiivisesti

Sisäkkäiset palstat

Palstojen välisen tilan muokkaaminen

CSS-luokat

Container

CSS-luokka	arvo	Kuvaus
`kds-container`		Komponentin perusluokka
`kds-container--[maxWidth]`	`sm`,`md`,`lg`,`xl`,`2xl`,`3xl`	Containerin maksimileveys
`kds-container--fluid`		100% leveä container
`kds-fluid-container`		Perusluokka 100% leveälle containerille jolle on määritelty maksimileveys
`kds-fluid-container--[maxWidth]`	`sm`,`md`,`lg`,`xl`,`2xl`,`3xl`	100% leveän containerin maksimileveys
`kds-mx-auto`		Keskitetty container
`kds-gx-[gx]`	`0`,`2`,`4`,`6`,`8`	Palstojen välinen tila

Row

CSS-luokka	arvo	Kuvaus
`kds-row`		Komponentin perusluokka
`kds-row--size`		Rivi, jonka palstoille on määritelty leveys
`kds-row--[cols]`	`auto`,`1`,`2`,`3`,`4`,`5`,`6`,`7`,`8`,`9`,`10`,`11`,`12`	Rivin palstojen leveys
`[maxWidth]:kds-row--size`	`sm`,`md`,`lg`,`xl`,`2xl`,`3xl`	Rivi, jonka palstoille on määritelty leveys tietyllä ruudunleveydellä
`[maxWidth]:kds-row--[cols]`	`sm`,`md`,`lg`,`xl`,`2xl`,`3xl` / `auto`,`1`,`2`,`3`,`4`,`5`,`6`,`7`,`8`,`9`,`10`,`11`,`12`	Rivin palstojen leveys tietyllä ruudunleveydellä

Column

CSS-luokka	arvo	Kuvaus
`kds-col`		Komponentin perusluokka
`kds-col--size`		Palsta, jolle on määritelty leveys
`kds-col--[cols]`	`auto`,`1`,`2`,`3`,`4`,`5`,`6`,`7`,`8`,`9`,`10`,`11`,`12`	Palstan leveys
`[maxWidth]:kds-col--size`	`sm`,`md`,`lg`,`xl`,`2xl`,`3xl`	Palsta, jolle on määritelty leveys tietyllä ruudunleveydellä
`[maxWidth]:kds-col--[cols]`	`sm`,`md`,`lg`,`xl`,`2xl`,`3xl` / `auto`,`1`,`2`,`3`,`4`,`5`,`6`,`7`,`8`,`9`,`10`,`11`,`12`	Palstan leveys tietyllä ruudunleveydellä