Ο Οπτικοποιητής Grid/Flex ανιχνεύει κάθε container CSS Grid και Flexbox σε μια ιστοσελίδα και αποδίδει τη δομή διάταξής τους ως έγχρωμες επικαλύψεις απευθείας στη σελίδα. Δείτε γραμμές grid, μεγέθη track, τιμές gap, κατευθύνσεις flex, άξονες ευθυγράμμισης και sizing παιδικών στοιχείων — όλα οπτικοποιημένα χωρίς άνοιγμα DevTools.
Τα CSS Grid και Flexbox είναι τα θεμέλια της σύγχρονης διάταξης web, αλλά είναι αόρατα από προεπιλογή. Δεν μπορείτε να δείτε γραμμές grid, άξονες flex ή τιμές gap απλά κοιτάζοντας μια σελίδα. Τα DevTools browser προσφέρουν κάποιες δυνατότητες επικάλυψης grid, αλλά απαιτούν να βρείτε πρώτα το container στον πίνακα Elements, να ενεργοποιήσετε χειροκίνητα την επικάλυψη και δείχνουν μόνο ένα container τη φορά. Ο Οπτικοποιητής Grid/Flex αυτοματοποιεί τα πάντα — σαρώνει τη σελίδα, βρίσκει κάθε container Grid και Flex και αποδίδει τη δομή διάταξής τους ως οπτικές επικαλύψεις. Τα Grid containers δείχνουν γραμμές στηλών και γραμμών με επισημασμένα μεγέθη track. Τα Flex containers δείχνουν κατεύθυνση κύριου άξονα, ευθυγράμμιση cross axis και κατανομή χώρου.
Τα Grid containers δείχνουν έγχρωμες γραμμές για κάθε track γραμμής και στήλης. Τα μεγέθη track (1fr, auto, 200px) επισημαίνονται σε κάθε γραμμή. Οι περιοχές gap επισημαίνονται με ημιδιαφανείς μπάντες. Τα implicit και explicit tracks διακρίνονται με συνεχείς έναντι διακεκομμένων γραμμών.
Τα Flex containers δείχνουν τον κύριο άξονα ως βέλος (row, row-reverse, column, column-reverse) και τον cross axis κάθετο σε αυτόν. Τα justify-content και align-items οπτικοποιούνται με επισημασμένους δείκτες ευθυγράμμισης που δείχνουν πώς κατανέμεται ο χώρος μεταξύ παιδιών.
Το εργαλείο σαρώνει αυτόματα ολόκληρη τη σελίδα και βρίσκει κάθε στοιχείο με display: grid ή display: flex (συμπεριλαμβανομένων inline παραλλαγών). Ένας αριθμός σήματος δείχνει τον συνολικό αριθμό που ανιχνεύτηκε.
Κάντε κλικ σε οποιοδήποτε container για να δείτε τις πλήρεις ιδιότητες διάταξης: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap και όλες τις ιδιότητες sizing παιδιών (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Κάθε παιδικό στοιχείο εντός Grid ή Flex container δείχνει το πραγματικό αποδοσμένο μέγεθός του, τιμές flex-grow/shrink και τοποθέτηση grid area. Δείτε ακριβώς πόσο χώρο καταλαμβάνει κάθε παιδί και γιατί.
Ανιχνεύει Grid και Flex containers φωλιασμένα μέσα σε άλλα Grid/Flex containers. Η επικάλυψη αποδίδει κάθε επίπεδο φωλιάσματος με διαφορετικά χρώματα ώστε να βλέπετε την πλήρη ιεραρχία διάταξης.
Μια στήλη grid είναι φαρδύτερη ή στενότερη από το αναμενόμενο; Η επικάλυψη δείχνει τα πραγματικά μεγέθη track (1fr επιλυμένο σε 342px, auto επιλυμένο σε 156px) ώστε να βλέπετε ακριβώς πώς υπολόγισε τα μεγέθη ο browser.
Γιατί ένα flex παιδί είναι φαρδύτερο από άλλο; Ο οπτικοποιητής δείχνει τιμές flex-grow, flex-shrink και flex-basis για κάθε παιδί, κάνοντας ορατή τη λογική κατανομής χώρου.
Αλλάξτε μέγεθος browser και παρακολουθήστε την επικάλυψη grid να ενημερώνεται σε πραγματικό χρόνο. Δείτε πώς αλλάζει το grid-template-columns από 1fr 1fr 1fr σε desktop σε 1fr σε κινητό και επαληθεύστε τη μετάβαση σε κάθε breakpoint.
Επισκεφτείτε καλοκατασκευασμένους ιστότοπους και δείτε πώς χρησιμοποιούν διατάξεις Grid και Flex στην παραγωγή. Οι οπτικές επικαλύψεις κάνουν αφηρημένες έννοιες (μονάδες fr, auto-fit, justify-content) απτές και διαδραστικές.
Ελέγξτε ότι όλα τα grids καρτών σε μια σελίδα χρησιμοποιούν τον ίδιο αριθμό στηλών και τιμές gap. Η επικάλυψη κάνει τις ασυνέπειες αμέσως ορατές — μία ενότητα με gap 20px ενώ άλλη χρησιμοποιεί 24px είναι εμφανές με μια ματιά.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Οπτικοποιητή Grid/Flex. Το εργαλείο σαρώνει τη σελίδα και ανιχνεύει όλα τα Grid και Flex containers.
Κάθε Grid και Flex container λαμβάνει έγχρωμη επικάλυψη περιγράμματος. Ένας πίνακας απαριθμεί όλα τα ανιχνευμένα containers με τον τύπο (Grid ή Flex) και τον selector στοιχείου.
Κάντε κλικ σε οποιοδήποτε container για να δείτε τις πλήρεις ιδιότητες διάταξης. Τα Grid containers δείχνουν γραμμές και μεγέθη track, τα Flex containers δείχνουν κατευθύνσεις άξονα και ευθυγράμμιση.
Κάθε παιδικό στοιχείο εμφανίζει το υπολογισμένο μέγεθός του και ιδιότητες ειδικές για διάταξη (flex-grow, grid-area). Κατανοήστε πώς κατανέμεται ο χώρος μεταξύ παιδιών.
Κάντε κλικ ξανά στο εικονίδιο εργαλείου για αφαίρεση όλων των επικαλύψεων και επιστροφή στην κανονική προβολή σελίδας.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
