CSS -rastercontainer
1
2
3
4
5
6
7
8
Rastercontainer
Om een HTML-element zich als een rastercontainer te laten gedragen, moet u de displayeigenschap op
gridof zetten inline-grid.
Rastercontainers bestaan uit rasteritems, geplaatst in kolommen en rijen.
De eigenschap grid-template-columns
De grid-template-columnseigenschap definieert het aantal kolommen in uw rasterlay-out en kan de breedte van elke kolom definiëren.
De waarde is een door spaties gescheiden lijst, waarbij elke waarde de breedte van de respectieve kolom definieert.
Als u wilt dat uw rasterlay-out 4 kolommen bevat, geeft u de breedte van de 4 kolommen op, of "auto" als alle kolommen dezelfde breedte moeten hebben.
Voorbeeld
Maak een raster met 4 kolommen:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Opmerking: als u meer dan 4 items in een raster met 4 kolommen heeft, voegt het raster automatisch een nieuwe rij toe om de items in te plaatsen.
De grid-template-columnseigenschap kan ook worden gebruikt om de grootte (breedte) van de kolommen te specificeren.
Voorbeeld
Stel een grootte in voor de 4 kolommen:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
De eigenschap grid-template-rows
De grid-template-rowseigenschap definieert de hoogte van elke rij.
1
2
3
4
5
6
7
8
De waarde is een door spaties gescheiden lijst, waarbij elke waarde de hoogte van de respectieve rij definieert:
Voorbeeld
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
De eigenschap voor het rechtvaardigen van inhoud
De justify-contenteigenschap wordt gebruikt om het hele raster in de container uit te lijnen.
1
2
3
4
5
6
Opmerking: de totale breedte van het raster moet kleiner zijn dan de breedte van de container, anders heeft de justify-contenteigenschap enig effect.
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;
}
De eigenschap align-content
De align-contenteigenschap wordt gebruikt om het hele raster in de container
verticaal uit te lijnen.
1
2
3
4
5
6
Opmerking: de totale hoogte van het raster moet kleiner zijn dan de hoogte van de container, anders heeft de align-contenteigenschap enig effect.
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;
}