CSS -rasteritem
1
2
3
4
5
Onderliggende elementen (items)
Een rastercontainer bevat rasteritems .
Standaard heeft een container één rasteritem voor elke kolom, in elke rij, maar u kunt de rasteritems zo opmaken dat ze meerdere kolommen en/of rijen beslaan.
De eigenschap van de rasterkolom:
De grid-columneigenschap definieert op welke kolom(men) een item moet worden geplaatst.
U definieert waar het item begint en waar het item eindigt.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Opmerking: de grid-columneigenschap is een steno-eigenschap voor de grid-column-starten de grid-column-endeigenschappen.
Om een item te plaatsen, kunt u verwijzen naar regelnummers of het trefwoord "span" gebruiken om te definiëren hoeveel kolommen het item zal beslaan.
Voorbeeld
Laat "item1" beginnen op kolom 1 en eindigen voor kolom 5:
.item1 {
grid-column: 1 / 5;
}
Voorbeeld
Laat "item1" beginnen op kolom 1 en overspan 3 kolommen:
.item1 {
grid-column: 1 / span 3;
}
Voorbeeld
Laat "item2" beginnen op kolom 2 en overspan 3 kolommen:
.item2 {
grid-column: 2 / span 3;
}
De rasterrij-eigenschap:
De grid-roweigenschap definieert op welke rij een item moet worden geplaatst.
U definieert waar het item begint en waar het item eindigt.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Opmerking: de grid-roweigenschap is een steno-eigenschap voor de grid-row-starten de grid-row-endeigenschappen.
Om een item te plaatsen, kunt u verwijzen naar regelnummers of het trefwoord "span" gebruiken om te definiëren hoeveel rijen het item zal beslaan:
Voorbeeld
Laat "item1" beginnen op rijregel 1 en eindigen op rijregel 4:
.item1 {
grid-row: 1 / 4;
}
Voorbeeld
Laat "item1" beginnen op rij 1 en overspannen 2 rijen:
.item1 {
grid-row: 1 / span 2;
}
De eigenschap van het rastergebied
De grid-areaeigenschap kan worden gebruikt als een verkorte eigenschap voor de
grid-row-start, grid-column-start, grid-row-enden de grid-column-endeigenschappen.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Voorbeeld
Laat "item8" beginnen op rijregel 1 en kolomregel 2 en eindigen op rijregel 5 en kolomregel 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Voorbeeld
Laat "item8" beginnen op rijregel 2 en kolomregel 1, en overspan 2 rijen en 3 kolommen:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Rasteritems een naam geven
De grid-areaeigenschap kan ook worden gebruikt om namen toe te wijzen aan rasteritems.
koptekst
Menu
Voornaamst
Rechts
voettekst
Benoemde rasteritems kunnen worden aangeduid met de grid-template-areaseigenschap van de rastercontainer.
Voorbeeld
Item1 krijgt de naam "myArea" en beslaat alle vijf kolommen in een rasterlay-out met vijf kolommen:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Elke rij wordt gedefinieerd door apostrofs (' ')
De kolommen in elke rij worden gedefinieerd binnen de apostrofs, gescheiden door een spatie.
Opmerking: een puntteken staat voor een rasteritem zonder naam.
Voorbeeld
Laat "myArea" twee kolommen beslaan in een rasterlay-out met vijf kolommen (punttekens vertegenwoordigen items zonder naam):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
Om twee rijen te definiëren, definieert u de kolom van de tweede rij binnen een andere set apostrofs:
Voorbeeld
Zorg ervoor dat "item1" twee kolommen en twee rijen omvat:
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
Voorbeeld
Geef alle items een naam en maak een kant-en-klaar webpaginasjabloon:
.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';
}
De volgorde van de items
Met de rasterlay-out kunnen we de items overal plaatsen waar we maar willen.
Het eerste item in de HTML-code hoeft niet als het eerste item in het raster te verschijnen.
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; }
U kunt de volgorde voor bepaalde schermformaten herschikken door mediaquery's te gebruiken:
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; }
}