Aantal en breedte van kolommen in CSS-grids
We beginnen met kennismaken met werken in een grid
door het aantal en de breedte van de kolommen in te stellen,
waarlangs de onderliggende elementen worden geplaatst.
Voor dit doel gebruiken we de
eigenschap grid-template-columns, die wordt opgegeven
in het bovenliggende element en het
aantal en de breedte van de kolommen bepaalt, die
de onderliggende elementen in het grid zullen innemen.
In de waarde van de eigenschap specificeren we de breedte van de kolommen
in pixels.
Voorbeeld
Laten we eerst een bovenliggend element maken
en er een grid-container van maken.
Stel dat we een div hebben, waarin
vier onderliggende elementen zich bevinden. Laten we ervoor
in de eigenschap display de waarde grid instellen,
en in de eigenschap grid-template-columns
de breedte voor twee kolommen opschrijven:
<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;
}
:
Voorbeeld
Laten we nu een tabel maken met vier kolommen van verschillende grootte:
<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;
}
:
Praktische opdrachten
Stel dat je een div hebt met negen onderliggende elementen. Maak van het bovenliggende element een grid-container.
Plaats de onderliggende elementen in twee
kolommen met een breedte van 200px.
Plaats de onderliggende elementen in drie
kolommen met een breedte van 150px.
Plaats de onderliggende elementen in drie
kolommen: de eerste met een breedte van 100px,
de tweede 150px, en de derde
200px.