Μάθετε CSS Grid σε 5 λεπτά - Ένα σεμινάριο για αρχάριους

Οι διατάξεις πλέγματος είναι θεμελιώδεις για το σχεδιασμό των ιστότοπων και η ενότητα CSS Grid είναι το πιο ισχυρό και ευκολότερο εργαλείο για τη δημιουργία του. Προσωπικά πιστεύω ότι είναι πολύ καλύτερο από ό, τι για παράδειγμα το Bootstrap (διαβάστε γιατί εδώ).

Η ενότητα έλαβε επίσης εγγενή υποστήριξη από τα μεγάλα προγράμματα περιήγησης (Safari, Chrome, Firefox, Edge), οπότε πιστεύω ότι όλοι οι προγραμματιστές front-end θα πρέπει να μάθουν αυτήν την τεχνολογία στο όχι πολύ μακρινό μέλλον.

Σε αυτό το άρθρο, θα σας καθοδηγήσω τα βασικά του CSS Grid το συντομότερο δυνατό. Θα αφήσω όλα όσα δεν πρέπει να σας ενδιαφέρουν μέχρι να καταλάβετε τα βασικά.

Έχω δημιουργήσει επίσης ένα δωρεάν μάθημα CSS Grid. Κάντε κλικ εδώ για να έχετε πλήρη πρόσβαση στο

το.

Εναλλακτικά, δείτε αυτό το άρθρο, το οποίο εξηγεί τι θα μάθετε καθ 'όλη τη διάρκεια του μαθήματος:

Τώρα ας πάμε σε αυτό!

Η πρώτη σας διάταξη πλέγματος

Τα δύο βασικά συστατικά ενός πλέγματος CSS είναι το περιτύλιγμα (γονικό) και το

είδη (παιδιά). Το περιτύλιγμα είναι το πραγματικό πλέγμα και τα αντικείμενα είναι το περιεχόμενο μέσα στο πλέγμα.

Ακολουθεί η σήμανση για ένα περιτύλιγμα με έξι αντικείμενα σε αυτό:

 1 2 3 4 5 6 

Για να μετατρέψουμε το περιτύλιγμα divσε πλέγμα , απλώς του δίνουμε μια οθόνη

grid:

Όμως, αυτό δεν κάνει τίποτα ακόμη, καθώς δεν έχουμε ορίσει πώς θέλουμε να φαίνεται το πλέγμα μας. Απλά θα στοιβάζει το 6 το ένα div'sπάνω στο άλλο.

Έχω προσθέσει λίγο στυλ, αλλά αυτό δεν έχει καμία σχέση με το πλέγμα CSS.

Στήλες και σειρές

Για να το κάνουμε δισδιάστατο, θα πρέπει να καθορίσουμε τις στήλες και τις σειρές. Ας δημιουργήσουμε τρεις στήλες και δύο σειρές. Θα χρησιμοποιήσουμε το grid-template-rowκαι τις grid-template-columnιδιότητες.

Καθώς έχουμε γράψει τρεις τιμές grid-template-columns, θα λάβουμε τρεις στήλες. Θα λάβουμε δύο σειρές, καθώς έχουμε καθορίσει δύο τιμές για το grid-template-rows.

Οι τιμές υπαγορεύουν το πλάτος που θέλουμε να είναι οι στήλες μας (100px) και πόσο ψηλές θα θέλαμε να είναι οι σειρές μας (50px) Εδώ είναι το αποτέλεσμα:

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

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } 

Προσπαθήστε να κατανοήσετε τη σύνδεση μεταξύ του κώδικα και της διάταξης.

Δείτε πώς παίζει:

Τοποθέτηση των αντικειμένων

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

Ας δημιουργήσουμε ένα πλέγμα 3x3, χρησιμοποιώντας την ίδια σήμανση με πριν.

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } 

Αυτό θα έχει ως αποτέλεσμα την ακόλουθη διάταξη:

Παρατηρήστε, βλέπουμε μόνο ένα πλέγμα 3x2 στη σελίδα, ενώ το ορίσαμε ως πλέγμα 3x3. Αυτό συμβαίνει επειδή έχουμε μόνο έξι στοιχεία για να γεμίσουμε το πλέγμα. Αν είχαμε τρία ακόμη, τότε θα γεμίζαμε και η χαμηλότερη σειρά.

Για να τοποθετήσετε και να αλλάξετε το μέγεθος των αντικειμένων, θα τα στοχεύσουμε και θα χρησιμοποιήσουμε τις ιδιότητες grid-columnκαι grid-row:

.item1 { grid-column-start: 1; grid-column-end: 4; } 

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

Δείτε πώς θα αναπαραχθεί στην οθόνη:

Είστε μπερδεμένοι γιατί έχουμε 4 γραμμές στηλών όταν έχουμε μόνο 3 στήλες; Ρίξτε μια ματιά σε αυτήν την εικόνα, όπου έχω σχεδιάσει τις γραμμές στηλών με μαύρο χρώμα:

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

Τέλος, θα ήθελα να δείξω έναν απλούστερο τρόπο σύνταξης της σύνταξης παραπάνω:

Για να βεβαιωθείτε ότι έχετε κατανοήσει σωστά αυτήν την έννοια, ας αναδιατάξουμε λίγο τα στοιχεία.

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

Δείτε πώς φαίνεται στη σελίδα. Προσπαθήστε να τυλίξετε το κεφάλι σας γιατί φαίνεται πως έχει. Δεν πρέπει να είναι πολύ δύσκολο.

Και αυτό ήταν!

Ευχαριστώ για την ανάγνωση! Το όνομά μου είναι Per Borgen, είμαι ο συνιδρυτής της Scrimba - ο ευκολότερος τρόπος για να μάθεις τον κώδικα. Εάν θέλετε να μάθετε να δημιουργείτε σύγχρονες ιστοσελίδες σε επαγγελματικό επίπεδο, θα πρέπει να ελέγξετε το bootcamp σχεδιασμού ιστοσελίδων που ανταποκρίνεται.