Ιδιότητα grid-column-end

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

Μια σημαντική λεπτομέρεια της ιδιότητας grid-column-end είναι ότι ο αριθμός της καθορισμένης στήλης δεν περιλαμβάνεται στην τελική θέση του στοιχείου - εάν ορίσουμε τον αριθμό 3, τότε το στοιχείο θα καταλαμβάνει μόνο την πρώτη και τη δεύτερη στήλη.

Σύνταξη

επιλογέας {
	grid-column-end: θετικός ή αρνητικός αριθμός;
}

Παράδειγμα

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

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

#parent {
	display: grid;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 1;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Παράδειγμα

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

<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-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
#elem4 {
	grid-column-start: 1;
	grid-column-end: 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-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

Παράδειγμα

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

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

#parent {
	display: grid;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-column-start: 1;
	grid-column-end: -4;
}
#elem2 {
	grid-column-start: 1;
	grid-column-end: -3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: -2;
}

Δείτε επίσης

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