⭐ 0
🔍
Κείμενο Εικόνα PDF & Έγγραφα Ήχος Μουσική Ηλεκτρονικά Χρόνος Βοηθητικά προγράμματα Επικυρωτές Εσωτερισμός Παιχνίδια

Holy Grail CSS Grid Layout — Ready Code

Σχεδιάστε οπτικά τις διατάξεις πλέγματος CSS: ορίστε στήλες, σειρές και κενό και, στη συνέχεια, πληκτρολογήστε ονόματα περιοχών σε κελιά για να δημιουργήσετε περιοχές-πρότυπα πλέγματος — με ζωντανή προεπισκόπηση και CSS και HTML με δυνατότητα αντιγραφής.

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

Επεξεργασία... 0%

Αποτέλεσμα

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

Η διάταξη του ιερού δισκοπότηρου κέρδισε το όνομά της επειδή ήταν πραγματικά δύσκολο να κατασκευαστεί αξιόπιστα πριν από το CSS Grid - χρόνια float hacks, διατάξεις τραπεζιών και απόλυτη τοποθέτηση προσπάθησαν να παραποιήσουν αυτό ακριβώς το σχήμα. Με περιοχές-πρότυπο-πλέγμα συμπτύσσεται σε πέντε επώνυμες περιοχές και μια χούφτα μεγέθη κομματιών, γι' αυτό και παραμένει το τυπικό πρώτο παράδειγμα για τη διδασκαλία του CSS Grid.

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

🛡️
Εκτελείται στο πρόγραμμα περιήγησης

Τα αρχεία και οι είσοδοι σας δεν φεύγουν ποτέ από αυτήν τη συσκευή. Η επεξεργασία εκτελείται εντελώς εκτός σύνδεσης. 100% ασφαλής.

Αποδεκτές Μορφές & Κανόνες

  • Είσοδοι αριθμών για 1–6 στήλες και σειρές, καθώς και ξεχωριστά στοιχεία ελέγχου κενού στήλης και κενού γραμμής που συνδυάζονται σε μία τιμή κενού όταν ταιριάζουν.
  • Λειτουργία επώνυμων περιοχών: πληκτρολογήστε ένα όνομα περιοχής απευθείας σε οποιοδήποτε κελί του ζωντανού πλέγματος. το εργαλείο δημιουργεί μια έγκυρη συμβολοσειρά πλέγματος-πρότυπο-περιοχών και προειδοποιεί όταν τα ονόματα δεν σχηματίζουν καθαρά ορθογώνια.
  • Μπλοκ CSS με δυνατότητα αντιγραφής (εμφάνιση: πλέγμα, πλέγμα-πρότυπο-στήλες/γραμμές, κενό, πλέγμα-πρότυπο-περιοχές) συν έναν αντίστοιχο σκελετό HTML με ένα div περιοχής πλέγματος ανά ονομαζόμενη περιοχή.

Βασικά Οφέλη

✓ Πληκτρολογήστε ένα όνομα απευθείας σε οποιοδήποτε κελί και τα ονόματα που ταιριάζουν συγχωνεύονται σε μια περιοχή πλέγματος-πρότυπο-περιοχών — χωρίς επιλογή μεταφοράς, χωρίς να μαντέψετε τη σύνταξη συμβολοσειράς με το χέρι.
✓ Το πλέγμα ζωντανής προεπισκόπησης αλλάζει μέγεθος και χρωματίζει εκ νέου σε κάθε αλλαγή, έτσι ώστε να βλέπετε τα ακριβή κομμάτια στηλών και σειρών και κάθε ονομαζόμενη περιοχή πριν αντιγράψετε μία μόνο γραμμή CSS.
✓ Προεπιλογές όπως η κλασική διάταξη του ιερού δισκοπότηρου και μια στενή πλαϊνή γραμμή σάς δίνουν μια πραγματική, λειτουργική δήλωση περιοχών πλέγματος-πρότυπου για να ξεκινήσετε αντί για κενό πλέγμα.

Περιπτώσεις χρήσης

  • • Δημιουργήστε το κλασικό κέλυφος της σελίδας του Αγίου Δισκοπότηρου — κεφαλίδα και υποσέλιδο πλήρους πλάτους με μια μεσαία γραμμή πλοήγησης/κύριας/περιοχής — πληκτρολογώντας ονόματα περιοχών αντί για χειρόγραφες περιοχές πλέγματος-πρότυπου.
  • • Τοποθετήστε μια σελίδα ρυθμίσεων ή έναν πίνακα ελέγχου διαχειριστή με μια πλαϊνή γραμμή σταθερού πλάτους δίπλα σε μια στήλη ευέλικτου περιεχομένου και αντιγράψτε το ακριβές CSS και HTML μόλις η ζωντανή προεπισκόπηση φαίνεται σωστή.
  • • Βεβαιωθείτε ότι ένα σύνολο ονομασμένων περιοχών σχηματίζει όντως έγκυρα ορθογώνια πριν από την αποστολή — το εργαλείο επισημαίνει τα ακριβή ονόματα που θα μπορούσαν να σπάσουν τις περιοχές πλέγματος-πρότυπου στο πρόγραμμα περιήγησης.