Το Tailwind CSS προσφέρει ένα σύστημα πλέγματος που επιτρέπει στους χρήστες να διαιρούν την ιστοσελίδα σε στήλες και σειρές χρησιμοποιώντας τα βοηθητικά προγράμματα grid-cols και grid-rows. Παρέχει επίσης τα βοηθητικά προγράμματα έναρξης και λήξης στηλών πλέγματος για τον έλεγχο του μεγέθους και της τοποθέτησης των στοιχείων στις στήλες πλέγματος. Αυτά τα βοηθητικά προγράμματα επιτρέπουν στους χρήστες να καθορίζουν τις θέσεις έναρξης και λήξης ενός στοιχείου εντός της διάταξης πλέγματος.
Αυτό το άρθρο θα εξηγήσει τη μέθοδο με την οποία οι στήλες ξεκινούν ή τελειώνουν στη συγκεκριμένη nη γραμμή πλέγματος στο Tailwind CSS.
Πώς να κάνετε τις στήλες να ξεκινούν ή να τελειώνουν στην nth Grid Line στο Tailwind;
Για να κάνετε τις στήλες να ξεκινούν ή να τελειώνουν στην nη γραμμή πλέγματος στο Tailwind, χρησιμοποιήστε το ' col-start-
Βήμα 1: Καθορίστε τις θέσεις έναρξης και λήξης των στοιχείων πλέγματος στο πρόγραμμα HTML
Φτιάξτε ένα πρόγραμμα HTML και χρησιμοποιήστε το ' col-start-
< σώμα >
< h1 τάξη = 'text-2xl text-center' >
Tailwind CSS - Έναρξη στήλης / Τέλος
h1 >
< div τάξη = 'πλέγμα grid-cols-4 gap-3 m-3' >
< div τάξη = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div τάξη = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div τάξη = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div τάξη = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div τάξη = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
σώμα >
Εδώ, στο γονικό στοιχείο
- ' πλέγμα ' χρησιμοποιείται για τη δημιουργία διάταξης πλέγματος.
- ' grid-cols-4 Η κλάση ” προσδιορίζει ότι το πλέγμα πρέπει να έχει 4 στήλες ίδιου μεγέθους.
- ' κενό-3 Η κλάση ορίζει μια απόσταση 3 μονάδων μεταξύ κάθε στοιχείου πλέγματος.
- ' m-3 Η κλάση προσθέτει ένα περιθώριο 3 μονάδων γύρω από το κοντέινερ πλέγματος.
Στα στοιχεία του εσωτερικού παιδιού
- ' col-start-2 Η ιδιότητα ” προσδιορίζει ότι το στοιχείο πλέγματος ξεκινά από τη στήλη 2.
- ' col-span-2 ” υποδεικνύει ότι το στοιχείο πλέγματος καταλαμβάνει 2 στήλες.
- ' col-start-1 ' χρησιμοποιείται για την εκκίνηση του στοιχείου πλέγματος από τη στήλη 1.
- ' col-end-3 ” καθορίζει ότι το στοιχείο πλέγματος τελειώνει στη στήλη 3.
- ' col-start-3 ' υποδεικνύει ότι το στοιχείο πλέγματος ξεκινά από τη δεύτερη στήλη.
- ' col-end-5 Η ιδιότητα ' τελειώνει το στοιχείο πλέγματος στη στήλη 5.
- ' col-span-3 ” καθορίζει ότι το στοιχείο πλέγματος καταλαμβάνει 3 στήλες.
- ' bg-teal-500 ” ρυθμίζει το γαλαζοπράσινο χρώμα στο φόντο όλων των στοιχείων πλέγματος.
- ' σ-5 ” προσθέτει μια επένδυση 5 μονάδων στο περιεχόμενο μέσα στα στοιχεία πλέγματος.
Βήμα 2: Επαλήθευση εξόδου
Για να βεβαιωθείτε ότι έχουν εφαρμοστεί οι θέσεις έναρξης και λήξης της στήλης πλέγματος, δείτε την ιστοσελίδα HTML:
Η παραπάνω έξοδος δείχνει ότι οι θέσεις έναρξης και λήξης της στήλης πλέγματος έχουν εφαρμοστεί με επιτυχία σύμφωνα με τις οποίες καθορίστηκαν.
συμπέρασμα
Για να κάνετε τις στήλες να ξεκινούν ή να τελειώνουν στην nη γραμμή πλέγματος στο Tailwind, το ' col-start-