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

Sidebar + Content CSS Grid Layout

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

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

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

Αποτέλεσμα

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

Αυτό είναι το πιο κοινό σχήμα πλοήγησης και περιεχομένου στον ιστό — σελίδες ρυθμίσεων, ιστότοποι τεκμηρίωσης και πίνακες εργαλείων διαχειριστή ακουμπούν όλα σε μια ράγα σταθερού πλάτους δίπλα σε μια ρευστή κύρια περιοχή. Επειδή η στήλη της πλαϊνής γραμμής χρησιμοποιεί μια τιμή pixel και η στήλη περιεχομένου χρησιμοποιεί 1fr, η πλαϊνή γραμμή παραμένει σταθερό πλάτος ενώ η στήλη περιεχομένου απορροφά κάθε επιπλέον εικονοστοιχείο της θύρας προβολής.

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

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

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

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

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

Βασικά Οφέλη

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

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

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