Cet article illustrera la méthode pour appliquer des points d'arrêt et des requêtes multimédias sur la grille de lignes dans Tailwind CSS.
Comment appliquer des points d'arrêt et des requêtes multimédias sur la grille de lignes dans Tailwind ?
Pour appliquer des points d'arrêt et des requêtes multimédias sur la grille de lignes dans Tailwind, créez un programme HTML. Ensuite, définissez le nombre de lignes pour différentes tailles d'écran en utilisant le ' nm ”, “ Maryland ' ou ' lg 'points d'arrêt avec le' grille-lignes-
Explorons la mise en œuvre pratique :
Étape 1 : Utiliser des points d'arrêt et des requêtes multimédias avec une grille de lignes dans le programme HTML
Créez un programme HTML et définissez le nombre de lignes pour différentes tailles d'écran avec le ' grille-lignes-
< corps >
< div classe = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div classe = 'bg-sarcelle-500 p-5' > 1 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 2 < / div >
< div classe = '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 = 'bg-sarcelle-500 p-5' > 6 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 7 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 8 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 9 < / div >
< div classe = 'bg-sarcelle-500 p-5' > dix < / div >
< / div >
< / corps >
Ici:
- ' grille ” La classe est utilisée pour créer une disposition de grille.
- ' grille-lignes-2 ” classe spécifie que la grille doit avoir 2 lignes de taille égale.
- ' md:grid-lignes-3 ” change la grille en 3 lignes de taille égale sur une taille d'écran moyenne.
- ' lg:grid-rows-5 ” change la grille en 5 lignes de taille égale sur le grand écran.
- ' 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.
- ' bg-sarcelle-500 ” La classe définit la couleur sarcelle à l'arrière-plan des éléments de la grille.
- ' p-5 ” classe ajoute un rembourrage de 5 unités au contenu à l'intérieur de l'enfant
articles.
Étape 2 : vérifier la sortie
Pour vous assurer que les points d'arrêt et les requêtes multimédias ont été appliqués sur la grille de lignes, affichez la page Web HTML en modifiant la taille de l'écran :
Dans la sortie ci-dessus, on peut voir que le nombre de lignes change avec la taille de l'écran. Cela indique que les points d'arrêt et les requêtes multimédias ont été appliqués avec succès sur la grille de lignes.
Conclusion
Pour appliquer des points d'arrêt et des requêtes multimédias sur la grille de lignes dans Tailwind, définissez le nombre de lignes pour différentes tailles d'écran à l'aide de ' nm ”, “ Maryland ' ou ' lg 'points d'arrêt avec le' grille-lignes-
” utilitaires. Ensuite, assurez-vous des changements sur la page Web en modifiant la taille de l'écran. Cet article a illustré la méthode pour appliquer des points d'arrêt et des requêtes multimédias sur la grille de lignes dans Tailwind CSS.