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

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

Σύνταξη

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

Παράδειγμα

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

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

Παράδειγμα

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

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

Παράδειγμα

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

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