Μάθετε πώς να χρησιμοποιείτε πλέγματα CSS για τη δημιουργία πολύπλοκων διατάξεων με ευκολία.

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

Πώς σας βοηθάει; Σε αντίθεση με τις παραδοσιακές μεθόδους διάταξης που σας επιτρέπουν να τοποθετείτε στοιχεία μόνο σε γραμμές ή στήλες, το πλέγμα CSS σάς προσφέρει το καλύτερο και από τους δύο κόσμους — μια δισδιάστατη προσέγγιση που χρησιμοποιεί γραμμές και στήλες.

Πλέγμα Δοχεία και Είδη

Μπορείτε να εφαρμόσετε ιδιότητες πλέγματος CSS σε δύο κύριους τύπους στοιχείων: γονέα και παιδιά. Όταν ορίζετε την ιδιότητα εμφάνισης σε "πλέγμα" για ένα γονικό στοιχείο, μετατρέπει αυτό το στοιχείο σε κοντέινερ πλέγματος. Οποιοδήποτε θυγατρικό στοιχείο σε αυτό το κοντέινερ πλέγματος γίνεται στοιχείο πλέγματος, κληρονομώντας τις εφαρμοζόμενες ιδιότητες πλέγματος.

instagram viewer

Δείτε πώς αναπαρίσταται:

Ένα στοιχείο πλέγματος μπορεί επίσης να γίνει δοχείο πλέγματος. Τώρα μπορείτε να ανατρέξετε στη διάταξη ως ένθετο πλέγμα — πλέγμα μέσα σε πλέγμα. Το κύριο πλέγμα κοντέινερ αναφέρεται τώρα ως το εξωτερικό πλέγμα, ενώ το δοχείο που έχει μετατραπεί σε πλέγμα γίνεται εσωτερικό πλέγμα.

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

Δείτε πώς φαίνεται:

Η κατανόηση της σχέσης μεταξύ δικτυωμάτων και αντικειμένων είναι απαραίτητη για κατασκευή δισδιάστατων διατάξεων αποτελεσματικά.

Λάβετε υπόψη ότι υπάρχουν ιδιότητες πλέγματος για δοχεία πλέγματος, ενώ άλλες είναι για είδη πλέγματος.

Γραμμές πλέγματος και ίχνη

Πριν ξεκινήσετε να χρησιμοποιείτε το πλέγμα CSS, υπάρχουν δύο βασικοί όροι που πρέπει να γνωρίζετε:

  1. Γραμμές πλέγματος: Οι γραμμές πλέγματος αναφέρονται στις οριζόντιες και κάθετες γραμμές που σχηματίζουν το πλέγμα σε μια διάταξη πλέγματος CSS. Καθορίζουν τα σημεία έναρξης και τέλους των σειρών και των στηλών, βοηθώντας στην οργάνωση του πού πηγαίνουν τα πράγματα στο πλέγμα. Αυτές οι γραμμές είναι σαν τις άκρες των κουτιών. έχουν αριθμούς που σας βοηθούν να αναφέρετε τα στοιχεία κατά την τοποθέτηση. Εδώ η κόκκινη διακεκομμένη γραμμή τους αντιπροσωπεύει:
  2. Διαδρομές πλέγματος: Είναι τα κενά μεταξύ των γραμμών πλέγματος που ορίζουν σειρές και στήλες. Είναι σαν τα δομικά στοιχεία της διάταξης του πλέγματος. Στην παραπάνω εικόνα, η έγχρωμη περιοχή μέσα σε κάθε στοιχείο αντιπροσωπεύει το κομμάτι πλέγματος.

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

Ιδιότητες κοντέινερ πλέγματος CSS

Αυτές είναι ιδιότητες που μπορείτε να εφαρμόσετε στο κοντέινερ πλέγματος για να οργανώσετε τη διάταξη και να βοηθήσετε στην τοποθέτηση στοιχείων μέσα σε αυτό. Όπως αναφέρθηκε προηγουμένως, ένα από αυτά είναι η ιδιότητα εμφάνισης που έχει οριστεί σε πλέγμα. Εδώ είναι περισσότερα:

Πρότυπο πλέγματος

Αυτή η ιδιότητα ορίζει το μέγεθος των σειρών και των στηλών. Μπορείτε να μετρήσετε αυτές τις ιδιότητες χρησιμοποιώντας pixel, ποσοστά ή την κλασματική μονάδα (fr). Επίσης, μπορείτε να χρησιμοποιήσετε λέξεις-κλειδιά όπως αυτο, minmax(), και επαναλαμβάνω() για την ενίσχυση της ευελιξίας.

  • πλέγμα-πρότυπο-γραμμές: Ορίζει ύψη σειρών.
  • πλέγμα-πρότυπο-στήλες: Ορίζει πλάτη στηλών.

Να μερικά παραδείγματα:

Χρήση εικονοστοιχείων:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Χρήση ποσοστών:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Χρησιμοποιώντας το fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Χρήση λέξεων-κλειδιών auto και minmax().:

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Χρησιμοποιώντας το repeat() για σταθερό μέγεθος:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Περιοχές αυτόματης τοποθέτησης και προτύπων πλέγματος

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

Περιοχές προτύπων πλέγματος: Σκεφτείτε ότι οι περιοχές προτύπων πλέγματος δημιουργούν μια διάταξη χρησιμοποιώντας ονομασμένες ζώνες. Είναι σαν να ονομάζουμε δωμάτια σε μια κάτοψη. Μπορείτε να ανατρέξετε σε αυτά τα ονόματα περιοχών κατά την τοποθέτηση στοιχείων πλέγματος. Για παράδειγμα:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Αυτή η διάταξη είναι σαν ένα πλέγμα με τρεις στήλες και τέσσερις σειρές. Υπάρχουν δύο σειρές για την κύρια περιοχή περιεχομένου. Οι περιοχές με ετικέτα περιλαμβάνουν "κεφαλίδα", "πλευρική γραμμή", "περιεχόμενο" και "υποσέλιδο". Στις επόμενες ενότητες, θα μάθετε πώς να χρησιμοποιείτε αυτές τις ετικέτες περιοχής στις ιδιότητες κάθε στοιχείου πλέγματος.

Ευθυγράμμιση στο Πλέγμα CSS

Μπορείτε να χρησιμοποιήσετε ιδιότητες στοίχισης για να ελέγξετε τη θέση των στοιχείων πλέγματος μέσα στα κελιά πλέγματος τους. Τα ακίνητα είναι:

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

Εδώ είναι ένα παράδειγμα:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

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

Κενό πλέγματος

Το κενό πλέγματος αναφέρεται στο διάστημα μεταξύ σειρών και στηλών σε μια διάταξη πλέγματος. Βοηθά στη δημιουργία οπτικού διαχωρισμού και προσθέτει χώρο μεταξύ των στοιχείων του πλέγματος.

ο πλέγμα-κενό Η ιδιότητα σάς επιτρέπει να ορίσετε το κενό μεταξύ σειρών και στηλών. Μπορείτε να χρησιμοποιήσετε διάφορες μονάδες για να το ορίσετε, όπως pixel (px), ποσοστά (%), em units (em) και άλλα.

.grid-container {
grid-gap: 20px;
}

Σε αυτό το παράδειγμα, το κοντέινερ πλέγματος έχει δύο στήλες με κενό 20 εικονοστοιχείων μεταξύ τους. Αυτή η απόσταση διαχωρίζει οπτικά τις στήλες και βελτιώνει τη διάταξη.

Ιδιότητες αντικειμένου πλέγματος CSS

Ακολουθούν ορισμένες βασικές ιδιότητες που ελέγχουν τη συμπεριφορά μεμονωμένων στοιχείων πλέγματος σε μια διάταξη πλέγματος CSS, μαζί με παραδείγματα:

grid-row-start και grid-row-end:

  • Καθορίζει τις γραμμές έναρξης και λήξης για ένα στοιχείο.
  • Οι τιμές μπορεί να είναι αριθμοί γραμμής, "span n" ή "auto". 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Αυτός ο κωδικός τοποθετεί Στοιχείο πλέγματος 1 από τη γραμμή της δεύτερης σειράς στη γραμμή της τέταρτης σειράς.

πλέγμα-στήλη-αρχή και πλέγμα-στήλη-τέλος:

  • Καθορίζει τις γραμμές στηλών έναρξης και λήξης για ένα στοιχείο.
  • Οι τιμές μπορεί να είναι αριθμοί γραμμής, "span n" ή "auto". 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Αυτός ο κωδικός τοποθετεί Στοιχείο πλέγματος 2 από τη γραμμή της πρώτης στήλης στη γραμμή της τρίτης στήλης.

περιοχή πλέγματος:

  • Καθορίζει το μέγεθος και τη θέση ενός στοιχείου πλέγματος μέσα στο πλέγμα με αναφορά στις ονομασμένες γραμμές πλέγματος στο πλέγμα-πρότυπο-περιοχές.
  • Όπως αναφέρθηκε προηγουμένως, τα προκαθορισμένα ονόματα περιοχών χρησιμοποιούνται ήδη με το πλέγμα-πρότυπο-περιοχές ιδιοκτησία. Ακολουθεί ένα παράδειγμα για το πώς να το χρησιμοποιήσετε μαζί με περιοχή πλέγματος. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Ιδού το αποτέλεσμα:

δικαιολογεί τον εαυτό του:

  • Ευθυγραμμίζει μεμονωμένα στοιχεία οριζόντια μέσα στο κελί του.
  • Οι τιμές μπορεί να είναι αρχή, τέλος, κέντρο και τέντωμα. 
.grid-item-5 {
justify-self: center;
}

Αυτός ο κωδικός κεντράρει οριζόντια το Στοιχείο πλέγματος 5 μέσα στο κελί του.

ευθυγραμμίζομαι:

  • Ευθυγραμμίστε μεμονωμένα στοιχεία κάθετα μέσα στο κελί του.
  • Οι τιμές μπορεί να είναι αρχή, τέλος, κέντρο και τέντωμα. 
.grid-item-1 {
align-self: end;
}

Αυτός ο κώδικας ευθυγραμμίζεται Στοιχείο πλέγματος 1 στο κάτω μέρος του κελιού του.

Μη διστάσετε να συνδυάσετε και να προσαρμόσετε αυτές τις ιδιότητες για να δημιουργήσετε τη διάταξη και την εμφάνιση που θέλετε για κάθε στοιχείο πλέγματος στο Πλέγμα CSS σας.

Δημιουργία αποκριτικών διατάξεων με χρήση πλέγματος CSS

Χρησιμοποιώντας πλέγματα CSS για δημιουργία διατάξεων με απόκριση είναι σημαντικό να διασφαλίσετε ότι η ιστοσελίδα σας προσαρμόζεται απρόσκοπτα σε διάφορα μεγέθη οθόνης και συσκευές. Μπορείτε να εφαρμόσετε αυτές τις μεθόδους:

  • Ερωτήματα μέσων: Μπορείτε να χρησιμοποιήσετε ερωτήματα πολυμέσων για να εφαρμόσετε διαφορετικές διατάξεις πλέγματος ανάλογα με τα μεγέθη οθόνης. Για παράδειγμα, μπορεί να χρειαστεί να αναδιατάξετε τα στοιχεία πλέγματος ή να προσαρμόσετε τα πλάτη στηλών για μικρότερες οθόνες.
  • Ευέλικτες Μονάδες: Χρησιμοποιήστε σχετικές μονάδες όπως ποσοστά και fr για να επιτρέψετε στα στοιχεία πλέγματος και στις στήλες να προσαρμόζονται αναλογικά στον διαθέσιμο χώρο.
  • minmax(): Χρησιμοποιήστε το minmax() λειτουργία για τον καθορισμό μιας περιοχής μεγεθών για στήλες ή γραμμές πλέγματος. Διασφαλίζει ότι τα στοιχεία δεν θα εμφανίζονται πολύ μικρά ή πολύ μεγάλα σε διαφορετικές οθόνες.

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

Εξερευνήστε τις δυνατότητες του CSS Grid Layout

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

Καθώς εμβαθύνετε σε συστήματα διάταξης, μπορεί να θέλετε να συγκρίνετε άλλες μεθόδους διάταξης με πλέγματα CSS. Μπορείτε να το κάνετε με τη λειτουργική μονάδα CSS Flexbox. Αυτό θα σας βοηθήσει να μάθετε να αποφασίζετε όταν εργάζεστε σε ένα έργο.