Sähköinen asiointipalvelu, johdanto

Sorakuilu

Grid

Lähde (vapaa käännös):css-tricks

Grid on nykyaikainen tapa tehdä css-layout. Aikaisemmin tutkimamme flex toimii yksinkertaisissa sivuissa, mutta gridillä saa tehtyä monimutkaisempia sivuja. Usein myös yhdistetään grid ja flex.

Lähes kaikki selaimet tällä hetkellä tukevat gridiä.

Määritä ensin parent

1. Aloita containerilla

Määritä aluksi container:


display: grid

2. Aseta sarake- ja rivikoot tai määritä alueet

2.1 Sarake- ja rivikoot

Anna arvot ominaisuuksille grid-template-columns ja grid-template-rows, sijoita sen jälkeen lapsielementit gridiin grid-column ja grid-row-ominaisuuksien avulla.

Jos kirjoitat vain eri sarakkeiden ja rivien koot, linjat numeroidaan automaattisesti sekä positiivisilla että negatiivisilla numeroilla.


.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

grid

Linjat voi myös itse nimetä (huomaa hakasulut syntaksissa):


.container {
  grid-template-columns: [eka] 40px [viiva2] 50px [viiva3] auto [sarake4-alku] 50px [viitonen] 40px [loppuviiva];
  grid-template-rows: [rivi1-alku] 25% [rivi1-loppu rivi2alku] 100px [kolmas] auto [viimeinen];
}

Yhdellä viivalla voi siis olla useampi nimi (rivi1-loppu rivi2alku).

Gridin lähdekoodin kirjoitusjärjetyksellä ei ole väliä (kuten ei flexissäkään). CSS voi sijoittaa gridit mihin tahansa järjestykseen, mikä helpottaa responsiivisen layoutin tekemistä.

Jos usealla elennetillä on sama nimi, niihin voi viitata rivin nimellä ja järjestysnumerolla.


.item {
  grid-column-start: col-start 2;
}

Toistuvia elementtejä voi kirjoittaa kahdella tavalla:


.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Tai


.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

fr -yksikkö

fr (fraction) mahdollistaa leveyden määrittämisen osaksi jäljellä olevaa tilaa. Seuraava esimerkki asettaa jokaisen osan grid containerin kolmanneksen levyiseksi.


.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Vapaa alue lasketaan sen jälkeen, kun tarkkaan määritetyt on ensin otettu pois luvusta:


.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

2.2 Aluemääritykset

Aluemääritykset tehdään grid-area -ominaisuudella. Sen nimen toistaminen aiheuttaa sisällön leviämisen kaikkiin souluihin, joilla on sama nimi. Huomaa, että annat nimen vain alueille, ei riville eikä sarakkeille, rivien ja sarakkeiden alut ja loput savat nimen alueen nimen mukaan. Siis jos alue on header, rivin ja sarakkeen alkukohta saa nimen header-start ja loppu header-end.

Mahdolliset arvot:


.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

grid

2.3 tee kaikki yhdellä määrityksellä (grid-template)

Ei yleensä paras tapa, tavallisesti annetaan jokaiselle arvot erikseen.

Esimerkki:


.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

Ominaisuuksia

Gridin viivojen paksuus (tyhjä väli alueiden välillä)

Esimerkki


.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
}

Tasaus vaakasuunnassa - justify-items

Esimerkkejä:

grid

grid

grid

grid

grid

grid

grid

Tasaus pystysuunnassa - align-content

grid

grid

grid

grid

grid

grid

grid

place-content, asemoi sekä vaaka- että pystysuunnassa

Esimerkki:


place-content: space-around start;

Ensimmäinen arvo tekee saman kuin align-content (pystysuunta) ja toinen saman kuin justify-content (vaakasuunta).

Korjaa grid - grid-auto-columns, grid-auto-rows, grid-auto-flow

JOs gridiin ei ole määritetty kaikkia soluja ja elementti sijoitytuisi gridin ulkoasuplelle, näillä määrityksillä luodaan automaattisesti puuttuvat solut gridiin.

grid - tee yhdellä käskyllä automatisoidut gridit

Muuta

Kokojen määrityksiin voi käyttää kaikkia tuttuja mittoja esim. px, rem, %, mutta lisäksi löytyy määrityksiä, esim. min-content, max-content, auto, sekä tärkein jako-osat (fractional units).

Joustaviin elementteihin voi myös laittaa raja-arvoja: voit esim. asettaa arakkeen leveydeksi 1 fr, mutta ei saa kutistua pienemmäksi kuin 200px.


grid-template-columns: 1fr minmax(200px, 1fr);

repeat() function säästää kirjoittamista, esimerkiksi määritä kerrallaan 10 saraketta:


grid-template-columns: repeat(10, 1fr);

Lasten (grid items) määritykset

Huomaa, että float, display: inline-block, display: table-cell, vertical-align ja column-* -ominaisuudet eivät vaikuta gridissä.

Lapsielementin sijainti

Seuraavat viittaavat viivaan:

Mahdolliset arvot:

Esimerkki:


.item-a {
  grid-column-start: 2;
  grid-column-end: viisi;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

grid

Esimerkki:


.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

grid

Jos ei ole määritetty, elementti pysyy yhdessä solussa. Elementit voivat mennmä päällekkäin - käytä z-index-ominaisuutta kontrolloimaan niiden näkyvyyttä.

grid-column, grid-row tekevät saman kuin edelliset yhdistettynä

Esimerkki:


.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

grid

grid-area

Ominaisuus nimeää elementin. Sillä voi myös esittää aikaisemmat vielä lyhyemmin.

Esimerkki:


.item-d {
  grid-area: header;
}

Asemoi solun sisällä vaakasuunnassa - justify-self

Elementtien asemointiin käytetään samanalaisia määrityksiä kuin containerin kohdalla (sekä gridissä että flexissä).

Mahdolliset arvot:

Asemoi elementin solun sisällä pystysuuntaan - align-self

Mahdolliset arvot:

Asemoi kahdessa suunnassa - place-self

Mahdolliset arvot:

Esimerkkejä:


.item-a {
  place-self: center;
}

grid


.item-a {
  place-self: center stretch;
}

grid