Antal och bredd på kolumner i CSS-grid

Vi börjar bekanta oss med hur grid fungerar genom att först tilldela antal och bredd på kolumnerna, längs vilka barn-elementen kommer att placeras. För detta ändamål använder vi egenskapen grid-template-columns, som anges i föräldraelementet och definierar antal och bredd på kolumnerna som barn-elementen kommer att uppta i griddet. I egenskapens värde anger vi kolumnbredderna i pixlar.

Exempel

Låt oss först skapa ett föräldraelement och göra det till en grid-container. Anta att vi har en div som innehåller fyra barn-element. Låt oss för den i egenskapen display ange värdet grid, och i egenskapen grid-template-columns skriva in bredden för två kolumner:

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

Exempel

Låt oss nu skapa en tabell med fyra kolumner av olika storlek:

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

Praktiska uppgifter

Anta att du har en div med nio barn- element. Gör föräldraelementet till en grid-container.

Placera barn-elementen i två kolumner med bredd 200px.

Placera barn-elementen i tre kolumner med bredd 150px.

Placera barn-elementen i tre kolumner: den första med bredd 100px, den andra 150px, och den tredje 200px.