Φαίνεται ότι το CSS Grid έρχεται εδώ και πολύ καιρό, αλλά μόλις φαίνεται να φτάνει σε ένα σημείο όπου οι άνθρωποι μιλούν όλο και περισσότερο για αυτό και ότι γίνεται κάτι που πρέπει να μάθουμε. Άρχισα να διαβάζω μερικές δημοσιεύσεις και να παίζω με τη σύνταξη τις τελευταίες δύο εβδομάδες, αλλά ζήτησα από τον συνάδελφό μου CSS-Trickster Miriam Suzanne να το συζητήσει μαζί μου σε ένα hangout βίντεο.
Περάσαμε το χρόνο μας σπρώχνοντας τα βασικά του CSS Grid και αυτό που μάθαμε είναι ότι είναι πολύ λιγότερο τρομακτικό να αρχίσουμε να το χρησιμοποιούμε απ 'ότι περίμενε κανείς. Ξεκινάμε με ένα απλό παράδειγμα και μετά ανακαλύπτουμε τις ιδιότητες CSS Grid για να μάθουμε τι άλλα πράγματα μπορεί να χειριστεί χωρίς να φτάσει πολύ μακριά στα ζιζάνια.
Ακολουθούν μερικοί πόροι που αναφέραμε κατά τη συνομιλία μας που αξίζει να συνδέσετε με:
- Ένας πλήρης οδηγός για το πλέγμα - Μια ολοκληρωμένη επισκόπηση του CSS Grid, συμπεριλαμβανομένων των ιδιοτήτων του και ενός γλωσσαρίου σημαντικών όρων και εννοιών.
- CodePen Demo - Αυτό είναι το απλό παράδειγμα με το οποίο ξεκινήσαμε στο βίντεο και προχωρήσαμε καθώς προχωρήσαμε.
- CSS Grid και Grid Highlighter - Αυτό το εργαλείο αναφέρθηκε προς το τέλος και παρέχει έναν τρόπο οπτικοποίησης της διάταξης πλέγματος χρησιμοποιώντας Firefox DevTools.