Ιδιότητα grid-column

Η ιδιότητα grid-column ορίζει την αρχική και τελική θέση ενός στοιχείου σε ένα grid ή πλέγμα κατά μήκος των στηλών. Οι τιμές της ιδιότητας μπορούν να είναι θετικοί ή αρνητικοί αριθμοί, που καθορίζονται με κάθετο. Ο πρώτος αριθμός δηλώνει την αρχική θέση του στοιχείου, ο δεύτερος - την τελική θέση.

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

Σύνταξη

επιλογέας {
	grid-column: αρχική θέση / τελική θέση;
}

Παράδειγμα

Ας ορίσουμε στα στοιχεία στο grid αρχικές και τελικές θέσεις:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Παράδειγμα

Και τώρα ας ορίσουμε στην ιδιότητα grid-column αρνητικούς αριθμούς:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / -2;
}
#elem2 {
	grid-column: 1 / -3;
}
#elem3 {
	grid-column: 1 / -4;
}

Παράδειγμα

Τώρα ας κάνουμε έτσι ώστε το πρώτο, δεύτερο και τρίτο στοιχείο να βρίσκονται στην πρώτη σειρά. Και το τέταρτο στοιχείο να καταλαμβάνει ολόκληρη τη δεύτερη σειρά:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 4;
}

Παράδειγμα

Κατά την επικάλυψη στηλών που καταλαμβάνονται από γειτονικά στοιχεία, κάθε επόμενο στοιχείο μετατοπίζεται μια σειρά πιο κάτω. Ας εκμεταλλευτούμε αυτό το χαρακτηριστικό για να τοποθετήσουμε το πρώτο στοιχείο στην πρώτη σειρά, το δεύτερο - στη δεύτερη, και το τρίτο και τέταρτο - στην τρίτη σειρά:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Παράδειγμα

Ας συνδυάσουμε τις ιδιότητες grid-column και grid-row:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Παράδειγμα

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

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Δείτε επίσης

ιδιότητα grid-row,
που ορίζει την αρχική και τελική θέση ενός στοιχείου στο grid κατά μήκος των σειρών
ιδιότητα grid-column-start,
που ορίζει την αρχική θέση ενός στοιχείου στο grid κατά μήκος των στηλών
ιδιότητα grid-column-end,
που ορίζει την τελική θέση ενός στοιχείου στο grid κατά μήκος των στηλών
ιδιότητα grid-template-columns,
που ορίζει τον αριθμό και το πλάτος των στηλών στο grid
ιδιότητα grid-auto-columns,
που ορίζει τον αριθμό και το πλάτος των στηλών στο άρρηκτο grid