Στο Tailwind CSS, το εύρος της γραμμής κάνει ένα στοιχείο να καταλαμβάνει δύο ή περισσότερες σειρές μέσα στο πλέγμα. Χρησιμοποιείται για τον καθορισμό του αριθμού των γραμμών που πρέπει να καταλαμβάνει/εκτείνεται ένα στοιχείο. Επιτρέπει στους χρήστες να προσαρμόσουν το μέγεθος και τη θέση του στοιχείου πλέγματος σε πολλές σειρές και να δημιουργήσουν διαφορετικές διατάξεις. Επιπλέον, μπορεί να χρησιμοποιηθεί για τη δημιουργία ευέλικτων και αποκριτικών διατάξεων πλέγματος για ιστοσελίδες.
Αυτή η εγγραφή θα αποτελεί παράδειγμα της μεθόδου δημιουργίας γραμμών που εκτείνονται στο Tailwind CSS.
Πώς να δημιουργήσετε ένα άνοιγμα σειρών στο Tailwind;
Για να εκτείνονται οι σειρές στο Tailwind, δημιουργήστε ένα πρόγραμμα HTML. Στη συνέχεια, χρησιμοποιήστε το ' row-span-<τιμή> ” και ορίστε τον αριθμό των σειρών που θα εκτείνονται. Απαιτείται να οριστεί ο αριθμός των σειρών που πρέπει να εκτείνεται κάθε συγκεκριμένο στοιχείο. Τέλος, δείτε τις αλλαγές στην ιστοσελίδα HTML για επαλήθευση.
Για πρακτική εφαρμογή, ελέγξτε τα παρεχόμενα βήματα:
Βήμα 1: Κάντε το άνοιγμα στηλών σε πρόγραμμα HTML
Δημιουργήστε ένα πρόγραμμα HTML και χρησιμοποιήστε το ' row-span-<τιμή> ” βοηθητικά προγράμματα με τα στοιχεία πλέγματος για να δημιουργήσετε ένα άνοιγμα στηλών. Για παράδειγμα, χρησιμοποιήσαμε το « row-span-3», «row-span-2» και «row-span-4». ” βοηθητικά προγράμματα όπως παρακάτω:
< σώμα >
< div τάξη = 'πλέγμα-γραμμές-4 πλέγμα-ροή-κενό κενό-3 μ.-3 κέντρο κειμένου' >
< div τάξη = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div τάξη = 'bg-teal-500 p-5' > 2 < / div >
< div τάξη = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div τάξη = 'bg-teal-500 p-5' > 4 < / div >
< div τάξη = 'bg-teal-500 p-5' > 5 < / div >
< div τάξη = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / σώμα >
Εδώ, στο γονικό στοιχείο
- ' πλέγμα Η κλάση χρησιμοποιείται για τη δημιουργία διάταξης πλέγματος.
- ' πλέγμα-σειρά-4 Η κλάση θέτει τον αριθμό των σειρών στο πλέγμα σε 4.
- ' πλέγμα-ροή-κολ Η τάξη ” τοποθετεί τα στοιχεία του πλέγματος οριζόντια σε στήλες.
- ' κενό-3 Η κλάση ορίζει μια απόσταση 3 μονάδων μεταξύ κάθε στοιχείου πλέγματος.
- ' m-3 Η κλάση εφαρμόζει ένα περιθώριο 3 μονάδων γύρω από το δοχείο πλέγματος.
- ' κείμενο-κέντρο Η κλάση θέτει το κείμενο κάθε στοιχείου πλέγματος στο κέντρο.
Στα στοιχεία του παιδιού
- ' row-span-3 Η κλάση ” καθορίζει ότι το στοιχείο πρέπει να εκτείνεται σε 3 σειρές στο πλέγμα.
- ' σειρά-άνοιγμα-2 Η κλάση δηλώνει ότι το στοιχείο πρέπει να εκτείνεται σε 2 σειρές στο πλέγμα.
- ' σειρά-άνοιγμα-4 Η κλάση ” προσδιορίζει ότι το στοιχείο πρέπει να εκτείνεται σε 4 σειρές στο πλέγμα.
- ' bg-teal-500 Η τάξη ” θέτει το γαλαζοπράσινο χρώμα στο φόντο του στοιχείου πλέγματος.
- ' σ-5 Η τάξη ” προσθέτει ένα συμπλήρωμα 5 μονάδων στο περιεχόμενο μέσα στα θυγατρικά στοιχεία .
Βήμα 2: Επαλήθευση εξόδου
Προβάλετε την ιστοσελίδα HTML για να επαληθεύσετε εάν το εύρος της γραμμής έχει εφαρμοστεί ή όχι:
Στην παραπάνω έξοδο, μπορεί να παρατηρηθεί ότι το άνοιγμα της γραμμής εφαρμόστηκε με επιτυχία σύμφωνα με το οποίο καθορίστηκε.
συμπέρασμα
Για να κάνετε τις σειρές να εκτείνονται στο Tailwind, χρησιμοποιήστε το ' row-span-<τιμή> ” στο πρόγραμμα HTML και καθορίστε τον αριθμό των γραμμών που πρέπει να εκτείνεται κάθε στοιχείο. Για επαλήθευση, δείτε τις αλλαγές στην ιστοσελίδα HTML. Αυτή η εγγραφή αποτελεί παράδειγμα της μεθόδου δημιουργίας γραμμών που εκτείνονται στο Tailwind CSS.