CSS ruudukkocontainer

1
2
3
4
5
6
7
8

Kokeile itse

Verkkokontti

Jos haluat, että HTML-elementti toimii verkkokonttina, sinun täytyy asettaa display Ominaisuuden arvo on grid tai inline-grid.

Verkkokontti koostuu sijoitetuista sarakkeisiin ja riveihin sijoitetuista verkkoelementeistä.

grid-template-columns ominaisuus

grid-template-columns Ominaisuus määrittää verkkorakenteen sarakkeiden määrän ja voi määrittää jokaisen sarakkeen leveyden.

Arvot ovat välilyönnillä erotettu luettelo, jossa jokainen arvo määrittää vastaavan sarakkeen pituuden.

Jos haluat, että verkkorakenteessa on 4 saraketta, määritä näiden 4 sarakkeen leveys; jos kaikki sarakkeet tulisi olla samanleveyksisiä, aseta arvoksi "auto".

esimerkki

Luo nelisarakkeinen verkkorivi:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Kokeile itse

Huomioitavaa:Jos 4-sarakkeisessa verkkorivissä on 4 tai useampia kohteita, verkkorivi lisää automaattisesti uusia rivejä ja sijoittaa nämä kohteet niihin.

grid-template-columns Ominaisuus voidaan käyttää myös määrittämään sarakkeiden mitat (leveys).

esimerkki

Aseta näiden 4 sarakkeen mitat:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Kokeile itse

grid-template-rows ominaisuus

grid-template-rows Ominaisuus määrittää jokaisen sarakkeen korkeuden.

1
2
3
4
5
6
7
8

Arvot ovat välilyönnillä erotettu luettelo, jossa jokainen arvo määrittää vastaavan rivin korkeuden:

esimerkki

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Kokeile itse

justify-content ominaisuus

justify-content Ominaisuus käytetään koko verkkorivin tasaukseen kontissa.

1
2
3
4
5
6
7
8

Huomioitavaa:Verkkorivin kokonaisleveys täytyy olla pienempi kuin konttin leveys, jotta justify-content ominaisuus toimii oikein.

esimerkki

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Kokeile itse

esimerkki

.grid-container {
  display: grid;
  justify-content: space-around;
}

Kokeile itse

esimerkki

.grid-container {
  display: grid;
  justify-content: space-between;
}

Kokeile itse

esimerkki

.grid-container {
  display: grid;
  justify-content: center;
}

Kokeile itse

esimerkki

.grid-container {
  display: grid;
  justify-content: start;
}

Kokeile itse

esimerkki

.grid-container {
  display: grid;
  justify-content: end;
}

Kokeile itse

align-content ominaisuus

align-content Ominaisuus käytetään koko ruudukon vertikaaliseen tasaukseen konteissa.

1
2
3
4
5
6
7
8

Huomioitavaa:Ruudukon kokonaiskorkeus täytyy olla pienempi kuin containerin korkeus, jotta align-content ominaisuus voi toimia.

esimerkki

.grid-container {
  display: grid;
  korkeus: 400px;
  align-content: center;
}

Kokeile itse

esimerkki

.grid-container {
  display: grid;
  korkeus: 400px;
  align-content: space-evenly;
}

Kokeile itse

esimerkki

.grid-container {
  display: grid;
  korkeus: 400px;
  align-content: space-around;
}

Kokeile itse

esimerkki

.grid-container {
  display: grid;
  korkeus: 400px;
  align-content: space-between;
}

Kokeile itse

esimerkki

.grid-container {
  display: grid;
  korkeus: 400px;
  align-content: start;
}

Kokeile itse

esimerkki

.grid-container {
  display: grid;
  korkeus: 400px;
  align-content: end;
}

Kokeile itse