Dans Tailwind CSS, l'étendue des lignes fait qu'un élément occupe deux lignes ou plus dans la grille. Il est utilisé pour définir le nombre de lignes qu'un élément doit occuper/s'étendre. Il permet aux utilisateurs d'ajuster la taille et la position de l'élément de grille sur plusieurs lignes et de créer différentes dispositions. De plus, il peut être utilisé pour créer des mises en page de grille flexibles et réactives pour les pages Web.
Cet article illustrera la méthode pour créer une étendue de lignes dans Tailwind CSS.
Comment créer une étendue de lignes dans Tailwind ?
Pour que les lignes s'étendent dans Tailwind, créez un programme HTML. Ensuite, utilisez le ' row-span-
Pour une mise en œuvre pratique, consultez les étapes fournies :
Étape 1 : Créer une étendue de colonne dans le programme HTML
Créez un programme HTML et utilisez le ' row-span-
< corps >
< div classe = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div classe = 'ligne-portée-3 bg-sarcelle-500 p-5' > 1 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 2 < / div >
< div classe = 'ligne-portée-2 bg-sarcelle-500 p-5' > 3 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 4 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 5 < / div >
< div classe = 'ligne-portée-4 bg-sarcelle-500 p-5' > 6 < / div >
< / div >
< / corps >
Ici, dans l'élément parent
- ' grille ” La classe est utilisée pour créer une disposition de grille.
- ' grille-ligne-4 ” classe définit le nombre de lignes dans la grille sur 4.
- ' grille-flux-col ” place les éléments de la grille horizontalement dans des colonnes.
- ' écart-3 ” classe définit un espacement de 3 unités entre chaque élément de la grille.
- ' m-3 ” classe applique une marge de 3 unités autour du conteneur de la grille.
- ' centre de texte ” classe le texte de chaque élément de la grille au centre.
Dans les éléments enfants
- ' row-span-3 ” classe spécifie que l'élément doit s'étendre sur 3 lignes dans la grille.
- ' rangée-étendue-2 ” classe indique que l'élément doit s'étendre sur 2 lignes dans la grille.
- ' rangée-span-4 ” classe spécifie que l'élément doit s'étendre sur 4 lignes dans la grille.
- ' bg-sarcelle-500 ” classe définit la couleur sarcelle à l'arrière-plan de l'élément de grille.
- ' p-5 ” ajoute un rembourrage de 5 unités au contenu à l'intérieur des éléments enfants.
Étape 2 : vérifier la sortie
Affichez la page Web HTML pour vérifier si l'étendue de ligne a été appliquée ou non :
Dans la sortie ci-dessus, on peut observer que la durée de ligne a été appliquée avec succès en fonction de laquelle elle a été spécifiée.
Conclusion
Pour que les lignes s'étendent dans Tailwind, utilisez le ' row-span-
” dans le programme HTML et spécifiez le nombre de lignes que chaque élément doit couvrir. Pour vérification, consultez les modifications sur la page Web HTML. Cet article a illustré la méthode pour créer une étendue de lignes dans Tailwind CSS.