Esikatselu
<Container>
<Row>
<Column>
<div className="grid-placeholder kds-py-2">12 / 12</div>
</Column>
</Row>
<Row gy={8}>
<Column col={6}>
<div className="grid-placeholder kds-py-2">6 / 12</div>
</Column>
<Column col={6}>
<div className="grid-placeholder kds-py-2">6 / 12</div>
</Column>
</Row>
</Container> Käyttötarkoitus
Container, Row ja Column-komponentteja yhdistelemällä voi toteuttaa sivun elementtien asettelun 12-palstaisen mallin mukaisesti.
Palstat kapenevat ja levenevät eri ruudunleveyksille automaattisesti. Palstojen responsiivisen käyttäytymisen voi tarvittaessa määrittää itse.
Saavutettavuus
Container, Row ja Column-komponentit eivät sisällä tällä hetkellä mitään erityistä teknistä toteutusta saavutettavuuden huomioimiseksi.
Komponenttien käyttäjän vastuulle jää varmistaa palstoituksen sisällön ja rakenteen saavutettavuus.
Container-elementin maksimileveys
Leveys määrittyy responsiivisten breakpointtien mukaan. Tarvittaessa fluid-propilla voi poistaa maksimileveyden käytöstä.
100 % 544px 720px 960px 1152px 1328px 1536px
Suurenna esimerkki nähdäksesi eri leveydet paremmin. Yhdistämällä fluid- ja maxWidth-propit, containerin leveys on 100 % annettuun leveyteen asti.
<>
<Container fluid>
<div className="grid-placeholder kds-py-4">Fluid</div>
</Container>
<Container fluid maxWidth="3xl">
<div className="grid-placeholder kds-py-4">
Fluid, {CONTAINER_WIDTH_3XL} ({CONTAINER_WIDTH_RELATIVE_3XL})
</div>
</Container>
<Container maxWidth="3xl">
<div className="grid-placeholder kds-py-4">
{CONTAINER_WIDTH_3XL} ({CONTAINER_WIDTH_RELATIVE_3XL})
</div>
</Container>
<Container maxWidth="2xl">
<div className="grid-placeholder kds-py-4">
{CONTAINER_WIDTH_2XL} ({CONTAINER_WIDTH_RELATIVE_2XL})
</div>
</Container>
<Container maxWidth="xl">
<div className="grid-placeholder kds-py-4">
{CONTAINER_WIDTH_XL} ({CONTAINER_WIDTH_RELATIVE_XL})
</div>
</Container>
<Container maxWidth="lg">
<div className="grid-placeholder kds-py-4">
{CONTAINER_WIDTH_LG} ({CONTAINER_WIDTH_RELATIVE_LG})
</div>
</Container>
<Container maxWidth="md">
<div className="grid-placeholder kds-py-4">
{CONTAINER_WIDTH_MD} ({CONTAINER_WIDTH_RELATIVE_MD})
</div>
</Container>
<Container maxWidth="sm">
<div className="grid-placeholder kds-py-4">
{CONTAINER_WIDTH_SM} ({CONTAINER_WIDTH_RELATIVE_SM})
</div>
</Container>
</> Palstojen toteuttaminen
<Container>
<Row gy={8}>
<Column>
<div className="grid-placeholder kds-py-4">12 / 12</div>
</Column>
</Row>
<Row gy={8}>
<Column col={4}>
<div className="grid-placeholder kds-py-4">4 / 12</div>
</Column>
<Column col={4}>
<div className="grid-placeholder kds-py-4">4 / 12</div>
</Column>
<Column col={4}>
<div className="grid-placeholder kds-py-4">4 / 12</div>
</Column>
</Row>
<Row gy={8}>
<Column col={8}>
<div className="grid-placeholder kds-py-4">8 / 12</div>
</Column>
<Column col={4}>
<div className="grid-placeholder kds-py-4">4 / 12</div>
</Column>
</Row>
<Row gy={8}>
<Column col={12}>
<div className="grid-placeholder kds-py-4">12 / 12</div>
</Column>
</Row>
</Container> Palstojen leveyden asettaminen responsiivisesti
Palstojen leveyden voi määritellä, joko Row-komponentilla tai Column-komponentilla, joka yliajaa Row-komponentin määritykset.
<Container>
<Row cols={12} sm={6} md={4} lg={2} gy={8}>
<Column>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">2 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
<Column>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">2 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
<Column>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">2 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
<Column>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">2 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
<Column>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">2 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
<Column>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">2 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
</Row>
<Row cols={12} sm={6} md={4} lg={2} gy={8}>
<Column lg={6}>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">6 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
<Column lg={6}>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">6 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
<Column lg={3}>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">3 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
<Column lg={3}>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">3 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
<Column lg={3}>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">3 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
<Column lg={3}>
<div className="grid-placeholder kds-py-4">
<span className="kds-hidden lg:kds-block">3 / 12</span>
<span className="kds-hidden md:kds-block lg:kds-hidden">4 / 12</span>
<span className="kds-hidden sm:kds-block md:kds-hidden">6 / 12</span>
<span className="kds-block sm:kds-hidden">12 / 12</span>
</div>
</Column>
</Row>
</Container> Sisäkkäiset palstat
Monimutkaisempia palstoitusmalleja voi toteuttaa asettamalla palstat sisäkkäin.
Jos käytät useita Container-komponentteja sisäkkäin, kiinnitä huomiota, että palstojen välit asettuvat oikein. Lähtökohtaisesti toista Container-komponenttia toisen sisällä ei tarvita.
<Container>
<Row>
<Column col={12} md={4}>
<div className="grid-placeholder kds-py-4">
<span className="kds-block md:kds-hidden">12 / 12</span>
<span className="kds-hidden md:kds-block">4 / 12</span>
</div>
</Column>
<Column col={12} md={8}>
<div className="grid-placeholder">
<Row>
<Column col={6}>
<div className="grid-placeholder kds-py-4">6 / 12</div>
</Column>
<Column col={6}>
<div className="grid-placeholder kds-py-4">6 / 12</div>
</Column>
</Row>
<Row>
<Column col={6}>
<div className="grid-placeholder kds-py-4">6 / 12</div>
</Column>
<Column col={6}>
<div className="grid-placeholder kds-py-4">6 / 12</div>
</Column>
</Row>
</div>
</Column>
</Row>
</Container> Palstojen välisen tilan muokkaaminen
Palstojen välistä tilaa voi muokata gx- ja gy-propeilla. Jotta palstojen välit asettuvat oikein, kannattaa käyttää samoja gx-arvoja sisäkkäisillä Container- ja Row-komponenteilla.
Oletuksena Grid-komponentit tekevät palstojen väliin 32 px tyhjää tilaa, ja ylä- ja alapuolelle 0. Parhaat asetukset palstojen välistyksille riippuvat toteutuksesta. Välistyksiä voi säätää tarpeen mukaan layout- ja sommitteluohjeet huomioiden.
Vaihtoehtoisesti välistykset voi toteuttaa palstojen sisällä oleviin elementteihin, jolloin gx- ja gy -propit kannattaa asettaa arvoon 0.
Responsiiviset palstojen välistykset Monimutkaisemmissa toteutuksissa palstojen välisen tilan voi asettaa responsiivisesti.
Tähän on tarjolla breakpoint-kohtaiset CSS-apuluokat:
sm:kds-gx-{x}, md:kds-gx-{x}, lg:kds-gx-{x}, xl:kds-gx-{x}, 2xl:kds-gx-{x}, 3xl:kds-gx-{x}
sm:kds-gy-{y}, md:kds-gy-{y}, lg:kds-gy-{y}, xl:kds-gy-{y}, 2xl:kds-gy-{y}, 3xl:kds-gy-{y}
<>
<Container gx={0}>
<Row gx={0} gy={0}>
<Column>
<div className="grid-placeholder kds-py-4">0</div>
</Column>
<Column>
<div className="grid-placeholder kds-py-4">0</div>
</Column>
</Row>
</Container>
<Container gx={2}>
<Row gx={2} gy={2}>
<Column>
<div className="grid-placeholder kds-py-4">2</div>
</Column>
<Column>
<div className="grid-placeholder kds-py-4">2</div>
</Column>
</Row>
</Container>
<Container gx={4}>
<Row gx={4} gy={4}>
<Column>
<div className="grid-placeholder kds-py-4">4</div>
</Column>
<Column>
<div className="grid-placeholder kds-py-4">4</div>
</Column>
</Row>
</Container>
<Container gx={6}>
<Row gx={6} gy={6}>
<Column>
<div className="grid-placeholder kds-py-4">6</div>
</Column>
<Column>
<div className="grid-placeholder kds-py-4">6</div>
</Column>
</Row>
</Container>
<Container gx={8}>
<Row gx={8} gy={8}>
<Column>
<div className="grid-placeholder kds-py-4">8</div>
</Column>
<Column>
<div className="grid-placeholder kds-py-4">8</div>
</Column>
</Row>
</Container>
</>