Anzahl und Breite der Spalten in CSS-Grids

Wir beginnen unsere Einführung in die Arbeit mit Grids damit, die Anzahl und Breite der Spalten festzulegen, entlang derer die untergeordneten Elemente platziert werden. Zu diesem Zweck verwenden wir die Eigenschaft grid-template-columns, die im übergeordneten Element angegeben wird und die Anzahl und Breite der Spalten definiert, die die untergeordneten Elemente im Grid einnehmen. Im Wert der Eigenschaft geben wir die Breite der Spalten in Pixel an.

Beispiel

Lassen Sie uns zunächst ein übergeordnetes Element erstellen und es zu einem Grid-Container machen. Nehmen wir an, wir haben ein div, in dem sich vier untergeordnete Elemente befinden. Wir legen für es in der Eigenschaft display den Wert grid fest, und in der Eigenschaft grid-template-columns schreiben wir die Breite für zwei Spalten:

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

Beispiel

Lassen Sie uns nun ein Grid mit vier unterschiedlich großen Spalten erstellen:

<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 Aufgaben

Nehmen wir an, Sie haben ein Div mit neun untergeordneten Elementen. Machen Sie das übergeordnete Element zu einem Grid-Container.

Platzieren Sie die untergeordneten Elemente in zwei Spalten mit einer Breite von 200px.

Platzieren Sie die untergeordneten Elemente in drei Spalten mit einer Breite von 150px.

Platzieren Sie die untergeordneten Elemente in drei Spalten: die erste mit einer Breite von 100px, die zweite mit 150px und die dritte mit 200px.