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.