A Tailwind CSS, l'abast de files fa que un element ocupi dues o més files dins de la quadrícula. S'utilitza per definir el nombre de files que ha d'ocupar un element. Permet als usuaris ajustar la mida i la posició de l'element de la quadrícula en diverses files i crear diferents dissenys. A més, es pot utilitzar per crear dissenys de quadrícula flexibles i sensibles per a pàgines web.
Aquest escrit exemplificarà el mètode per fer un abast de files a Tailwind CSS.
Com fer una franja de files a Tailwind?
Per fer que les files s'escampin a Tailwind, feu un programa HTML. A continuació, utilitzeu el ' row-span-
Per a la implementació pràctica, consulteu els passos proporcionats:
Pas 1: feu que les columnes s'estenen al programa HTML
Creeu un programa HTML i utilitzeu el ' row-span-
< cos >
< div classe = 'grid grid-files-4 grid-flow-col gap-3 m-3 text-center' >
< div classe = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div classe = 'bg-teal-500 p-5' > 2 < / div >
< div classe = 'fila-span-2 bg-teal-500 p-5' > 3 < / div >
< div classe = 'bg-teal-500 p-5' > 4 < / div >
< div classe = 'bg-teal-500 p-5' > 5 < / div >
< div classe = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / cos >
Aquí, a l'element
- “ graella La classe s'utilitza per crear un disseny de quadrícula.
- “ quadrícula-fila-4 ”La classe estableix el nombre de files de la graella en 4.
- “ quadrícula-flux-col ” La classe col·loca els elements de la quadrícula horitzontalment en columnes.
- “ buit-3 ”La classe estableix un espai de 3 unitats entre cada element de la quadrícula.
- “ m-3 ”La classe aplica un marge de 3 unitats al voltant del contenidor de la graella.
- “ centre de text ” La classe estableix el text de cada element de la quadrícula al centre.
En els elements
- “ fila-span-3 ” La classe especifica que l'element s'ha d'estendre en 3 files de la quadrícula.
- “ fila-span-2 ” La classe indica que l'element s'ha d'estendre en 2 files de la quadrícula.
- “ fila-span-4 ” La classe especifica que l'element s'ha d'estendre en 4 files de la quadrícula.
- “ bg-teal-500 ” La classe estableix el color verd verde al fons de l'element de la quadrícula.
- “ pàg-5 ” La classe afegeix un farciment de 5 unitats al contingut dins dels elements secundaris.
Pas 2: verifiqueu la sortida
Consulteu la pàgina web HTML per verificar si s'ha aplicat l'abast de files o no:
A la sortida anterior, es pot observar que la franja de files s'ha aplicat correctament segons la qual s'ha especificat.
Conclusió
Per fer que les files s'escampin a Tailwind, utilitzeu el ' row-span-
” al programa HTML i especifiqueu el nombre de files que ha d'abastar cada element. Per a la verificació, visualitzeu els canvis a la pàgina web HTML. Aquest escrit ha exemplificat el mètode per fer un abast de files a Tailwind CSS.