Συντομογραφία για την στοίχιση μεμονωμένων στοιχείων στο CSS Grid
Μπορείτε να στοιχίσετε ένα μεμονωμένο στοιχείο
ταυτόχρονα και στον οριζόντιο και στον κάθετο άξονα.
Για αυτό χρησιμοποιείται η ιδιότητα place-self.
Δέχεται δύο τιμές χωρισμένες με κενό.
Η πρώτη τιμή καθορίζει την στοίχιση
στην κάθετη κατεύθυνση, και η δεύτερη - στην οριζόντια.
Ας δούμε μερικά παραδείγματα.
Στο κέντρο κάθετα και στην αρχή οριζόντια
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: center start;
}
:
Στην αρχή κάθετα και στο τέλος οριζόντια
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: start end;
}
:
Στο τέλος κάθετα και στο κέντρο οριζόντια
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: end center;
}
:
Πρακτικές Ασκήσεις
Δημιουργήστε ένα grid, που αποτελείται από πέντε στοιχεία και τοποθετήστε τα σε τρεις σειρές. Εκτελέστε στοίχιση του πρώτου στοιχείου στην αρχή του οριζόντιου άξονα και στο κέντρο του κάθετου άξονα.
Αλλάξτε την προηγούμενη άσκηση έτσι, ώστε η στοίχιση του τρίτου στοιχείου να γίνεται στο τέλος του οριζόντιου και στο κέντρο του κάθετου άξονα.
Τώρα τοποθετήστε τα στοιχεία του grid σε δύο σειρές και ορίστε στοίχιση του πέμπτου στοιχείου στο κέντρο του οριζόντιου και στο τέλος του κάθετου άξονα.
Πραγματοποιήστε τις ακόλουθες ρυθμίσεις: το δεύτερο στοιχείο να στοιχίζεται στην αρχή του οριζόντιου και στο τέλος του κάθετου άξονα, ενώ το τέταρτο στοιχείο - στο κέντρο του οριζόντιου και στην αρχή του κάθετου άξονα.
