CSS -roosteritem
1
2
3
4
5
Kinderelemente (Items)
'n Roosterhouer bevat roosteritems .
By verstek het 'n houer een roosteritem vir elke kolom, in elke ry, maar jy kan die roosteritems so stileer dat hulle oor verskeie kolomme en/of rye sal strek.
Die roosterkolom Eiendom:
Die grid-columneienskap definieer op watter kolom(me) 'n item geplaas moet word.
Jy definieer waar die item sal begin, en waar die item sal eindig.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Let wel: Die grid-columneiendom is 'n snelskrif eiendom vir die grid-column-starten die grid-column-endeiendomme.
Om 'n item te plaas, kan jy na reëlnommers verwys , of die sleutelwoord "span" gebruik om te definieer hoeveel kolomme die item sal strek.
Voorbeeld
Laat "item1" begin op kolom 1 en eindig voor kolom 5:
.item1 {
grid-column: 1 / 5;
}
Voorbeeld
Laat "item1" begin op kolom 1 en strek oor 3 kolomme:
.item1 {
grid-column: 1 / span 3;
}
Voorbeeld
Laat "item2" begin op kolom 2 en strek oor 3 kolomme:
.item2 {
grid-column: 2 / span 3;
}
Die rooster-ry eiendom:
Die grid-roweiendom definieer op watter ry om 'n item te plaas.
Jy definieer waar die item sal begin, en waar die item sal eindig.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Let wel: Die grid-roweiendom is 'n snelskrif eiendom vir die grid-row-starten die grid-row-endeiendomme.
Om 'n item te plaas, kan jy na reëlnommers verwys , of die sleutelwoord "span" gebruik om te definieer hoeveel rye die item sal strek:
Voorbeeld
Laat "item1" begin op rylyn 1 en eindig op rylyn 4:
.item1 {
grid-row: 1 / 4;
}
Voorbeeld
Laat "item1" begin op ry 1 en span 2 rye:
.item1 {
grid-row: 1 / span 2;
}
Die rooster-area Eiendom
Die grid-areaeiendom kan gebruik word as 'n snelskrif eiendom vir die
grid-row-start, grid-column-start, grid-row-enden die grid-column-endeiendomme.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Voorbeeld
Laat "item8" begin op rylyn 1 en kolomlyn 2, en eindig op rylyn 5 en kolomreël 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Voorbeeld
Laat "item8" begin op rylyn 2 en kolomlyn 1, en strek oor 2 rye en 3 kolomme:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Benoem roosteritems
Die grid-areaeiendom kan ook gebruik word om name aan roosteritems toe te ken.
Opskrif
Spyskaart
Hoof
Reg
Voetskrif
Benoemde roosteritems kan deur die grid-template-areaseiendom van die roosterhouer verwys word.
Voorbeeld
Item1 kry die naam "myArea" en strek oor al vyf kolomme in 'n vyf kolomme roosteruitleg:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Elke ry word gedefinieer deur apostrofe (' ')
Die kolomme in elke ry word binne die apostrofe gedefinieer, geskei deur 'n spasie.
Let wel: 'n Puntteken verteenwoordig 'n roosteritem sonder naam.
Voorbeeld
Laat "myArea" twee kolomme in 'n roosteruitleg van vyf kolomme strek (punttekens verteenwoordig items sonder naam):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
Om twee rye te definieer, definieer die kolom van die tweede ry binne 'n ander stel apostrofe:
Voorbeeld
Laat "item1" twee kolomme en twee rye strek:
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
Voorbeeld
Noem alle items en maak 'n gereed-vir-gebruik webblad-sjabloon:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
Die volgorde van die items
Die Grid-uitleg stel ons in staat om die items te plaas waar ons wil.
Die eerste item in die HTML-kode hoef nie as die eerste item in die rooster te verskyn nie.
1
2
3
4
5
6
Voorbeeld
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
Jy kan die volgorde vir sekere skermgroottes herrangskik deur medianavrae te gebruik:
Voorbeeld
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}