Abstand zwischen Spalten und Zeilen in CSS Grids

Mit der Eigenschaft gap kann man gleichzeitig den Abstand zwischen den Spalten und Zeilen des Grids festlegen.

Es kann entweder ein Wert übergeben werden oder zwei Werte durch ein Leerzeichen getrennt. Wenn ein Wert übergeben wird, legt dieser gleichzeitig den Abstand zwischen Spalten und Zeilen fest. Wenn zwei Werte übergeben werden, dann legt der erste den Abstand zwischen den Zeilen und der zweite - zwischen den Spalten fest.

Beispiel

Legen wir den gleichen Abstand zwischen Spalten und Zeilen fest:

<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>9</div>
</div>

#parent {
	display: grid;
	gap: 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Legen wir unterschiedliche Abstände zwischen Spalten und Zeilen fest:

<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>9</div>
</div>

#parent {
	display: grid;
	gap: 20px 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Praktische Aufgaben

Erstellen Sie eine Tabelle, in der der Abstand zwischen Spalten und Zeilen 10px beträgt.

Erstellen Sie eine Tabelle, in der der Abstand zwischen Spalten und Zeilen 10px und 5% beträgt.