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ä |