Συντομογραφία για γραμμές και στήλες σε CSS Grids

Υπάρχουν περιπτώσεις όπου είναι βολικό να καθορίσουμε τις διαστάσεις των γραμμών και των στηλών σε σύντομη μορφή. Για αυτό χρησιμοποιούμε την ιδιότητα grid-template, η οποία ορίζεται στο γονικό στοιχείο και αντιπροσωπεύει μια συντομογραφία της δήλωσης δύο ιδιοτήτων: grid-template-rows και grid-template-columns.

Οι γραμμές και οι στήλες για το grid container ορίζονται χωρισμένες με κάθετο, οι διαστάσεις τους ορίζονται σε μονάδες μέτρησης.

Παράδειγμα

Ας δημιουργήσουμε ένα πλέγμα χρησιμοποιώντας την ιδιότητα grid-template:

<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;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#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;
	grid-template: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα στο πλέγμα από το προηγούμενο παράδειγμα ας κάνουμε την επάνω γραμμή πλάτους δύο κλασμάτων (fr), και την πρώτη στήλη - μισό κλάσμα (fr):

<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;
	grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

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

Υλοποιήστε το ακόλουθο πλέγμα: