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;
}

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:

• grid-area-name alueen nimi
• . piste tarkoittaa tyhjää solua gridissä
• none - ei määritetty grid-alueita

.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";
}

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

• column-gap
• row-gap
• grid-column-gap
• grid-row-gap
• gap ja grid-gap(yhdistävät edellisiä)

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

Tasaus pystysuunnassa - align-content

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:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Mahdolliset arvot:

• line – voi olla numero, joka viittaa numeroidun gridin viivaan tai nimettyyn viivaan
• span – lapsielementti laajenee luvun mukaisen gridin solujen alueelle
• span – lapsielementti laajenee kunnes tulee on annetun nimen alueella
• auto – automaattinen sjainti, span tai oletusspan

Esimerkki:

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

Esimerkki:

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

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

• start – sijoittaa elementin solun alkuun
• end - sijoittaa elementin solun loppuun
• center - sijoittaa elementin solun keskelle
• stretch – levittää elementin koko solun leveydelle (oletusarvo)

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

Mahdolliset arvot:

• start – sijoittaa elementin solun alkuun
• end - sijoittaa elementin solun loppuun
• center - sijoittaa elementin solun keskelle
• stretch – levittää elementin koko solun leveydelle (oletusarvo)

Asemoi kahdessa suunnassa - place-self

Mahdolliset arvot:

• auto – oletustasaus
• align-selt justify-self

Esimerkkejä:

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

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