Απόσταση μεταξύ στηλών και σειρών σε CSS Grid

Με την ιδιότητα gap μπορείτε να ορίσετε ταυτόχρονα την απόσταση μεταξύ των στηλών και των σειρών του grid.

Μπορείτε να περάσετε είτε μία τιμή, είτε δύο τιμές διαχωρισμένες με κενό. Εάν δοθεί μία τιμή, ορίζει ταυτόχρονα την απόσταση μεταξύ των στηλών και των σειρών. Εάν δοθούν δύο τιμές, τότε η πρώτη ορίζει την απόσταση μεταξύ των σειρών και η δεύτερη - μεταξύ των στηλών.

Παράδειγμα

Ας ορίσουμε την ίδια απόσταση μεταξύ στήλων και σειρών:

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

Παράδειγμα

Ας ορίσουμε διαφορετικές αποστάσεις μεταξύ στήλων και σειρών:

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

Πρακτικές Ασκήσεις

Δημιουργήστε ένα πλέγμα, στο οποίο η απόσταση μεταξύ στήλων και σειρών θα είναι 10px.

Δημιουργήστε ένα πλέγμα, στο οποίο η απόσταση μεταξύ στήλων και σειρών θα είναι 10px και 5% αντίστοιχα.