CSS -roosterhouer
1
2
3
4
5
6
7
8
Roosterhouer
Om 'n HTML-element as 'n roosterhouer te laat optree, moet jy die displayeiendom op
gridof stel inline-grid.
Roosterhouers bestaan uit roosteritems wat binne kolomme en rye geplaas word.
Die rooster-sjabloon-kolomme Eiendom
Die grid-template-columnseiendom definieer die aantal kolomme in jou roosteruitleg, en dit kan die breedte van elke kolom definieer.
Die waarde is 'n spasie-geskeide lys, waar elke waarde die breedte van die onderskeie kolom definieer.
As jy wil hê dat jou roosteruitleg 4 kolomme moet bevat, spesifiseer die breedte van die 4 kolomme, of "outo" as alle kolomme dieselfde breedte moet hê.
Voorbeeld
Maak 'n rooster met 4 kolomme:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Let wel: As jy meer as 4 items in 'n rooster met 4 kolomme het, sal die rooster outomaties 'n nuwe ry byvoeg om die items in te plaas.
Die grid-template-columnseiendom kan ook gebruik word om die grootte (breedte) van die kolomme te spesifiseer.
Voorbeeld
Stel 'n grootte vir die 4 kolomme:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
Die rooster-sjabloon-rye Eiendom
Die grid-template-rowseiendom definieer die hoogte van elke ry.
1
2
3
4
5
6
7
8
Die waarde is 'n spasie-geskeide lys, waar elke waarde die hoogte van die onderskeie ry definieer:
Voorbeeld
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
Die regverdig-inhoud Eiendom
Die justify-contenteiendom word gebruik om die hele rooster binne die houer in lyn te bring.
1
2
3
4
5
6
Let wel: Die rooster se totale breedte moet minder as die houer se breedte wees vir die justify-contenteiendom om enige effek te hê.
Voorbeeld
.grid-container {
display: grid;
justify-content: space-evenly;
}
Voorbeeld
.grid-container {
display: grid;
justify-content: space-around;
}
Voorbeeld
.grid-container {
display: grid;
justify-content: space-between;
}
Voorbeeld
.grid-container {
display: grid;
justify-content: center;
}
Voorbeeld
.grid-container {
display: grid;
justify-content: start;
}
Voorbeeld
.grid-container {
display: grid;
justify-content: end;
}
Die belyn-inhoud Eiendom
Die align-contenteiendom word gebruik om die hele rooster binne die houer
vertikaal in lyn te bring.
1
2
3
4
5
6
Let wel: Die rooster se totale hoogte moet minder as die houer se hoogte wees vir die align-contenteiendom om enige effek te hê.
Voorbeeld
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Voorbeeld
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Voorbeeld
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Voorbeeld
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Voorbeeld
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Voorbeeld
.grid-container {
display: grid;
height: 400px;
align-content: end;
}