Ιδιότητα grid-template-columns

Η ιδιότητα grid-template-columns ορίζει τον αριθμό και το πλάτος των στηλών που θα καταλαμβάνει ένα στοιχείο στο grid ή πλέγμα. Η ιδιότητα καθορίζεται στο γονικό στοιχείο και ορίζει το πλάτος των στηλών των θυγατρικών στοιχείων. Στην τιμή της ιδιότητας ορίζουμε το πλάτος των στηλών σε οποιεσδήποτε μονάδες για μεγέθη.

Όταν καθορίζουμε τιμές σε pixels στις ιδιότητες τα μεγέθη των στηλών θα αντιστοιχούν ακριβώς σε αυτές. Αν ορίσουμε τη λέξη auto, τότε οι στήλες θα γεμίζουν όλο τον διαθέσιμο χώρο. Η χρήση της μονάδας fr (κλάσμα) σημαίνει, ότι όλος ο χώρος θα χωριστεί σε ίσα μέρη. Το πλεονέκτημα της fr είναι η προσαρμοστικότητά της σε διαφορετικά containers ή αναλύσεις οθόνης, καθώς η fr απλά τα χωρίζει στον καθορισμένο αριθμό κλασμάτων χωρίς σύνδεση με ακριβές μέγεθος σε pixels.

Σύνταξη

επιλογέας {
	grid-template-columns: πλάτος στήλης;
}

Παράδειγμα

Ας ορίσουμε το πλάτος των στηλών για τα στοιχεία μας στο grid:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Ας ορίσουμε για την πρώτη και τρίτη στήλη σταθερό πλάτος σε pixels, ενώ η δεύτερη στήλη ας γεμίσει αυτόματα τον διαθέσιμο χώρο:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα με την ιδιότητα grid-template-columns ας κάνουμε έτσι ώστε η πρώτη και δεύτερη στήλη να καταλάβουν ένα μέρος του container, ενώ η τρίτη στήλη - τρία μέρη:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Οι τιμές, που καθορίζονται σε μονάδες fr μπορούν να πάρουν κλασματική μορφή. Ας αλλάξουμε το προηγούμενο παράδειγμα, ορίζοντας για τη δεύτερη και τρίτη στήλη πλάτος σε δεκαδικούς αριθμούς:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 0.5fr 2.5fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Ας στην ιδιότητα grid-template-columns ορίσουμε τη συνάρτηση repeat(), που θα ενημερώσει το container, ότι όλες οι τρεις στήλες πρέπει να έχουν το ίδιο πλάτος:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα ας αλλάξουμε το προηγούμενο παράδειγμα έτσι ώστε στις τρεις ίδιες στήλες να προστεθεί μια τέταρτη, που θα καταλάβει δύο κλάσματα του container:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Ας ορίσουμε για τις πρώτες δύο στήλες πλάτος σε ένα κλάσμα του container, ενώ για τις τελευταίες δύο στήλες - σε δύο κλάσματα:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα ας ορίσουμε το πλάτος των στηλών συνδυάζοντας τιμές, που καθορίζονται με τη βοήθεια της συνάρτησης repeat() και ελεύθερων μονάδων fr:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Επίσης στη συνάρτηση repeat() μπορούμε να ορίσουμε την τιμή auto-fill, που θα γεμίσει το container μας με ίδιες στήλες του επιθυμητού πλάτους:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, 200px);
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Πολύ βολικό είναι μαζί με το auto-fill να ορίζουμε τη συνάρτηση minmax, που ορίζει εύρος πλάτους στηλών από την ελάχιστη έως τη μέγιστη τιμή. Αν το πλάτος του container δεν χωράει όλες τις στήλες, τότε μερικές από αυτές θα μετακινηθούν σε νέα γραμμή, ενώ οι στήλες στη γραμμή θα κατανεμηθούν ομοιόμορφα σε αυτήν. Ας αλλάξουμε το προηγούμενο παράδειγμα, ορίζοντας σε αυτό τη συνάρτηση minmax. Για να δείτε διαφορετικές επιλογές τοποθέτησης στηλών αλλάξτε το πλάτος της σελίδας στο πρόγραμμα περιήγησής σας:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα ας ορίσουμε την ιδιότητα auto-fit, η διαφορά της οποίας από το auto-fill έγκειται στο ότι, προσαρμόζει τον αριθμό των στηλών ανάλογα με το διαθέσιμο πλάτος του container, διευρύνοντάς τες ή συμπιέζοντάς τες:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Επίσης παράλληλα με την fr μπορούμε να χρησιμοποιήσουμε τιμές σε %, που επίσης ορίζουν ποιο μέρος του container θα καταλάβει η στήλη. Στην περίπτωση αυτή πρώτα θα υπολογιστεί το μέγεθος της στήλης σε %, και ο εναπομείνας ελεύθερος χώρος θα χωριστεί σε κλάσματα:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50% 1fr 2fr 30%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Ας χρησιμοποιήσουμε μαζί τις ιδιότητες grid-template-columns και grid-template-rows:

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

Παράδειγμα

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

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

Δείτε επίσης

η ιδιότητα grid-template-rows,
που ορίζει τον αριθμό και το πλάτος των σειρών στο grid
η ιδιότητα grid-auto-columns,
που ορίζει τον αριθμό και το πλάτος των στηλών στο άρρηκτο grid