Antal og bredde af kolonner i CSS-grid

Vi vil introducere arbejdet med grid ved at tildele antallet og bredden af de kolonner, som de underordnede elementer vil blive placeret efter. Til dette formål vil vi bruge egenskaben grid-template-columns, som angives i forældreelementet og definerer antallet og bredden af de kolonner, som de underordnede elementer vil optage i griddet. I egenskabens værdi angiver vi kolonnebredderne i pixels.

Eksempel

Lad os først oprette et forældreelement og gøre det til en grid-container. Antag, at vi har en div, som indeholder fire underordnede elementer. Lad os angive værdien grid for egenskaben display, og i egenskaben grid-template-columns skrive bredden for to kolonner:

<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;
}

Eksempel

Lad os nu oprette en tabel med fire kolonner af forskellig størrelse:

<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;
}

Praktiske opgaver

Antag, at du har en div med ni underordnede elementer. Gør forældreelementet til en grid-container.

Placer de underordnede elementer i to kolonner med en bredde på 200px.

Placer de underordnede elementer i tre kolonner med en bredde på 150px.

Placer de underordnede elementer i tre kolonner: den første med en bredde på 100px, den anden 150px, og den tredje 200px.