Tailwind CSS propose un système de grille qui permet aux utilisateurs de diviser la page Web en colonnes et en lignes à l'aide des utilitaires grid-cols et grid-rows. Il fournit également les utilitaires de début et de fin de colonne de grille pour contrôler la taille et le placement des éléments sur les colonnes de grille. Ces utilitaires permettent aux utilisateurs de spécifier les positions de début et de fin d'un élément dans la disposition de la grille.
Cet article explique la méthode pour que les colonnes commencent ou se terminent à la nième ligne de grille spécifique dans Tailwind CSS.
Comment faire en sorte que les colonnes commencent ou se terminent à la nième ligne de grille dans Tailwind ?
Pour que les colonnes commencent ou se terminent à la nième ligne de grille dans Tailwind, utilisez le ' col-start-
Étape 1 : Spécifiez les positions de début et de fin des éléments de la grille dans le programme HTML
Faites un programme HTML et utilisez le ' col-start-
< corps >
< h1 classe = 'texte-2xl texte-centre' >
CSS Tailwind - Début de colonne / Fin
h1 >
< div classe = 'grille grille-cols-4 écart-3 m-3' >
< div classe = 'col-start-2 col-span-2 bg-sarcelle-500 p-5' > 1 div >
< div classe = 'col-début-1 col-fin-3 bg-sarcelle-500 p-5' > 2 div >
< div classe = 'col-début-3 col-fin-5 bg-sarcelle-500 p-5' > 3 div >
< div classe = 'col-start-2 col-span-3 bg-sarcelle-500 p-5' > 4 div >
< div classe = 'col-début-1 col-fin-5 bg-sarcelle-500 p-5' > 5 div >
div >
corps >
Ici, dans l'élément parent
- ' grille ” est utilisé pour créer une disposition de grille.
- ' grille-cols-4 ” classe spécifie que la grille doit avoir 4 colonnes de taille égale.
- ' écart-3 ” classe définit un espacement de 3 unités entre chaque élément de la grille.
- ' m-3 ” classe ajoute une marge de 3 unités autour du conteneur de la grille.
Dans les éléments
- ' col-début-2 ” propriété spécifie que l'élément de grille commence à la colonne 2.
- ' col-span-2 ” indique que l'élément de la grille occupe 2 colonnes.
- ' col-début-1 ” est utilisé pour démarrer l'élément de grille à partir de la colonne 1.
- ' col-fin-3 ” spécifie que l'élément de grille se termine à la colonne 3.
- ' col-début-3 ” indique que l'élément de grille commence à partir de la deuxième colonne.
- ' col-end-5 ” La propriété termine l'élément de grille à la colonne 5.
- ' col-span-3 ” précise que l'élément de la grille occupe 3 colonnes.
- ' bg-sarcelle-500 ” définit la couleur sarcelle à l'arrière-plan de tous les éléments de la grille.
- ' p-5 ” ajoute un rembourrage de 5 unités au contenu à l'intérieur des éléments de la grille.
Étape 2 : vérifier la sortie
Pour vous assurer que les positions de début et de fin des colonnes de la grille ont été appliquées, affichez la page Web HTML :
La sortie ci-dessus indique que les positions de début et de fin de colonne de grille ont été appliquées avec succès en fonction de ce qu'elles ont été spécifiées.
Conclusion
Pour que les colonnes commencent ou se terminent à la nième ligne de grille dans Tailwind, le ' col-start-