Tailwind CSS ofereix un sistema de graella que permet als usuaris dividir la pàgina web en columnes i files mitjançant les utilitats grid-cols i grid-files. També proporciona les utilitats inicials i finals de la columna de la quadrícula per controlar la mida i la col·locació dels elements a través de les columnes de la quadrícula. Aquestes utilitats permeten als usuaris especificar les posicions inicials i finals d'un element dins del disseny de la quadrícula.
Aquest article explicarà el mètode per fer que les columnes comencin o acabin a l'enèsima línia de quadrícula específica a Tailwind CSS.
Com fer que les columnes comencin o acabin a la enèsima línia de quadrícula a Tailwind?
Per fer que les columnes comencin o acabin a l'enèsima línia de quadrícula a Tailwind, utilitzeu el ' col-inici-
Pas 1: especifiqueu les posicions inicials i finals dels elements de la quadrícula al programa HTML
Feu un programa HTML i utilitzeu el ' col-inici-
< cos >
< h1 classe = 'text-2xl text-center' >
Tailwind CSS - Inici de la columna / Final
h1 >
< div classe = 'grid grid-cols-4 gap-3 m-3' >
< div classe = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div classe = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div classe = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div classe = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div classe = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
cos >
Aquí, a l'element
- “ graella s'utilitza per crear un disseny de quadrícula.
- “ graella-cols-4 ” La classe especifica que la graella hauria de tenir 4 columnes de la mateixa mida.
- “ buit-3 ”La classe estableix un espai de 3 unitats entre cada element de la quadrícula.
- “ m-3 ”La classe afegeix un marge de 3 unitats al voltant del contenidor de la graella.
En els elements
- “ col-inici-2 ” la propietat especifica que l'element de la quadrícula comença a la columna 2.
- “ col-span-2 ” indica que l'element de la quadrícula ocupa 2 columnes.
- “ col-inici-1 ” s'utilitza per iniciar l'element de la quadrícula des de la columna 1.
- “ col-extrem-3 ” especifica que l'element de la quadrícula acaba a la columna 3.
- “ col-inici-3 ” indica que l'element de la quadrícula comença des de la segona columna.
- “ col-extrem-5 ” La propietat acaba l'element de la quadrícula a la columna 5.
- “ col-span-3 ” especifica que l'element de la quadrícula ocupa 3 columnes.
- “ bg-teal-500 ” estableix el color verd verde al fons de tots els elements de la quadrícula.
- “ pàg-5 ” afegeix un farciment de 5 unitats al contingut dins dels elements de la quadrícula.
Pas 2: verifiqueu la sortida
Per assegurar-vos que s'han aplicat les posicions inicial i final de la columna de la quadrícula, consulteu la pàgina web HTML:
La sortida anterior indica que les posicions inicials i finals de la columna de quadrícula s'han aplicat correctament segons les quals s'han especificat.
Conclusió
Per fer que les columnes comencin o acabin a l'enèsima línia de quadrícula a Tailwind, el ' col-inici-