Γεννήτρια διάταξης CSS

Δείτε σε προεπισκόπηση μια διάταξη Flexbox ή Grid.

Στη συσκευή σου · Χωρίς λογαριασμό

Το Γεννήτρια διάταξης CSS επεξεργάζεται όσα εισάγεις σε αυτό το πρόγραμμα περιήγησης. Τα δεδομένα εισόδου και τα αποτελέσματα δεν περιλαμβάνονται στα δεδομένα ανάλυσης χρήσης. Τα πρόσφατα εργαλεία αποθηκεύουν ονόματα εργαλείων, αριθμό επισκέψεων και χρόνους τελευταίας επίσκεψης. Τα αποθηκευμένα εργαλεία κρατούν μόνο τα ονόματά τους. Η αποθήκευση προχείρου είναι προαιρετική και γίνεται μόνο σε αυτή τη συσκευή· διέγραψε το αποθηκευμένο κείμενο από τα χειριστήρια του προχείρου. Η φόρτωση κειμένου από URL είναι προαιρετική και συνδέεται με τον αντίστοιχο διακομιστή· ο διακομιστής βλέπει το URL και τη διεύθυνση IP σου. Η προαιρετική ενέργεια «Χρήση σε» κρατά προσωρινά σε αυτή την καρτέλα τα δεδομένα για το επόμενο εργαλείο. Το επόμενο εργαλείο τα αφαιρεί μόλις ανοίξει και τα αγνοεί αν έχει περάσει πάνω από ένα λεπτό.

Η «Αντιγραφή συνδέσμου» περιλαμβάνει στη διεύθυνση τα δεδομένα εισόδου που επιλέγεις να κοινοποιήσεις. Όποιος έχει τον σύνδεσμο μπορεί να τα ανοίξει ξανά. Τα αρχεία και τα παραγόμενα αποτελέσματα δεν περιλαμβάνονται. Τα εργαλεία κωδικών πρόσβασης και κλειδιών κοινοποιούν μόνο ρυθμίσεις.

Ελληνικά

Ετικέτες στοιχείων, μία ανά γραμμή

Διάταξη

Επιλογές και τοπικό αρχείο

Στήλες Grid

Διάκενο (px)

Βασικό μέγεθος Flex (px)

Άνοιγμα αρχείου κειμένου από αυτή τη συσκευή

Οι προαιρετικές ρυθμίσεις ισχύουν μόνο για αυτή την καρτέλα.

Το αποτέλεσμά σας

Πηγαίος κώδικας HTML

Περισσότερα

Συντομεύσεις πληκτρολογίου

Σχετικά με συνδέσμους και επαναφορά

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

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

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

Πώς λειτουργεί η γεννήτρια διάταξης CSS

Δημιουργήστε από ετικέτες στοιχείων μια διάταξη Grid που προσαρμόζεται στο διαθέσιμο πλάτος ή μια διάταξη Flexbox με αναδίπλωση. Αλλάξτε τον αριθμό στηλών, το διάκενο ή το βασικό μέγεθος Flex και αντιγράψτε ή κατεβάστε το ίδιο αυτοτελές HTML που χρησιμοποιεί η προεπισκόπηση.

Επόμενο: Μορφοποίηση CSS

Επόμενο: Υπολογιστής ειδικότητας CSS

Επόμενο: Έλεγχος αντίθεσης χρωμάτων

Παράδειγμα

Ένα πλέγμα τριών στηλών χρησιμοποιεί repeat(3, minmax(0, 1fr)), ώστε οι μεγάλες ετικέτες να αναδιπλώνονται μέσα σε στήλες ίσου πλάτους. Το Flexbox αναδιπλώνει τα στοιχεία σύμφωνα με το προτιμώμενο βασικό τους μέγεθος και τον διαθέσιμο χώρο.

Πριν χρησιμοποιήσετε το αποτέλεσμα

Το εργαλείο δίνει μια αρχική διάταξη, όχι έναν πλήρη κατασκευαστή ιστοσελίδων ή έλεγχο συμβατότητας προγραμμάτων περιήγησης. Η προεπισκόπηση έχει σταθερό στυλ επίδειξης. Το Grid διατηρεί τον επιλεγμένο αριθμό στηλών και σε μικρά πλάτη· προσθέστε media queries αν το τελικό σας σχέδιο χρειάζεται διαφορετικό αριθμό στηλών.

Ενημερώθηκε 7 Οκτωβρίου 2026

Παραπομπή σε αυτή τη σελίδα

Πρότυπο παραπομπών

ToolOctopus. “Γεννήτρια διάταξης CSS.” Ενημερώθηκε 7 Οκτωβρίου 2026. https://tooloctopus.com/el/γεννήτρια-διάταξης-css.

Προσθέστε ημερομηνία πρόσβασης, αν απαιτείται από τις οδηγίες σας.

Οι παραπομπές μορφοποιούνται με το citeproc-js του Frank Bennett και πρότυπα Citation Style Language. Άδεια χρήσης και πηγαίος κώδικας.