Sarakkeiden lukumäärä ja leveys CSS-gridissä
Tutustumme grid-työskentelyyn
aloittamalla sarakkeiden lukumäärän ja leveyden määrittämisellä, joiden mukaisesti
lapsielementit sijoittuvat.
Tätä tarkoitusta varten käytämme
ominaisuutta grid-template-columns, joka määritetään
vanhempaelementissä ja asettaa
sarakkeiden lukumäärän ja leveyden, joita
lapsielementit käyttävät gridissä.
Ominaisuuden arvossa määritämme sarakkeiden leveyden
pikseleinä.
Esimerkki
Luodaanpa ensin vanhempaelementti
ja tehdään siitä grid-säiliö.
Oletetaan, että meillä on div, jossa sijaitsee
neljä lapsielementtiä. Asetetaan sille
ominaisuudessa display arvo grid,
ja ominaisuudessa grid-template-columns
kirjoitetaan leveys kahdelle sarakkeelle:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 200px 400px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esimerkki
Luodaanpa nyt taulukko neljällä erikokoisella sarakkeella:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 250px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Käytännön tehtävät
Oletetaan, että sinulla on div, jossa on yhdeksän lapsi- elementtiä. Tee vanhempaelementistä grid-säiliö.
Sijoita lapsielementit kahteen
sarakkeeseen, joiden leveys on 200px.
Sijoita lapsielementit kolmeen
sarakkeeseen, joiden leveys on 150px.
Sijoita lapsielementit kolmeen
sarakkeeseen: ensimmäinen leveydeltään 100px,
toinen 150px, ja kolmas
200px.