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

3 ίσες στήλες Διάταξη πλέγματος CSS

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

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

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

Αποτέλεσμα

Αυτή η σελίδα ανοίγει το σύνολο της γεννήτριας πλέγματος σε τρεις στήλες ίσου πλάτους σε μια μόνο σειρά, με τις ονομασμένες περιοχές απενεργοποιημένες — η διάταξη είναι απλώς επανάληψη (3, 1fr), ο συντομότερος τρόπος για να πούμε "τρεις στήλες που διαχωρίζουν πάντα το διαθέσιμο πλάτος ομοιόμορφα".

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

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

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

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

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

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

Βασικά Οφέλη

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

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

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