Grid Gap CSS
Dans ce tutoriel, nous utiliserons cette propriété «grid-gap» dans CSS et vous expliquerons en détail le concept «Grid-Gap» avec différents exemples.
Exemple 1:
Nous allons commencer par notre premier exemple en créant un nouveau fichier dans le logiciel, Visual Studio Code. Lorsque nous créons un nouveau fichier dans Visual Studio Code, nous pouvons choisir la langue et nous sélectionnons HTML. Le code HTML doit ensuite être créé. Le code Visual Studio nous permet d'acquérir instantanément les étiquettes fondamentales en entrant "!"Et puis en cliquant sur" Entrer."Donc, nous profiterons de cette capacité et collecterons toutes ces étiquettes fondamentales. Dans la balise HTML Head, nous fournissons un lien vers le fichier CSS. Nous allons créer un titre, puis mettre un paragraphe sous cette rubrique. Ensuite, nous créons une classe Div principale avec le nom «Grid-Container» et mettons sept autres classes de div à l'intérieur de cette div principale. Nous donnons des noms différents à tous les divs tels que «item1» pour Div Class 1, «Item2» pour Div Class 2, etc.
Nous utilisons la propriété «Text-Align» pour le «corps» et l'alignant sur le «centre». Ensuite, nous choisissons le «vert» comme «couleur» de la tête et mettons également le «soulignement» pour la propriété «text-decoration». La famille de la police est «algérienne». La «Font-Family» du paragraphe est «Times New Roman». Le «poids de police» est «audacieux» et «marron» la «couleur». La «taille de police» que nous définissons ici est «20px» pour le paragraphe et aussi «italique» la police du paragraphe.
Maintenant, nous allons définir la div principale nommée "Grid-Continer". Pour cela, «l'affichage» que nous utilisons est la «grille». Ensuite, nous avons la propriété «Grid-Template-Column» qui est utilisée pour spécifier le nombre de colonnes à l'intérieur d'une grille. Nous mettons «Auto Auto Auto» comme valeur de cette propriété, ce qui signifie que la taille de la colonne est définie en fonction de la taille du conteneur. Ici, nous avons trois colonnes dans cette disposition de grille.
Maintenant, nous définissons séparément le «grid-column-gap» et «grid-row-gap». La «grille-colonne-gap» que nous définissons est «40px» et le «Grid-Row-Gap» est «20px». La «couleur d'arrière-plan» du récipient principal Div est «orange» et le rembourrage que nous utilisons ici est «10px». Cette propriété de rembourrage est utilisée pour générer l'espace autour du contenu.
Maintenant, nous allons définir la «div» du «Grid. conteneur »qui représente tous les divs présents à l'intérieur de la div principale. Nous définissons la «couleur d'arrière-plan» des divs au «blanc» et le texte qui est écrit à l'intérieur est aligné dans le «centre». Après tout cela, nous avons la propriété «rembourrage» dans laquelle nous avons réglé le rembourrage supérieur et inférieur sur «20px» et le rembourrage droit à gauche est «0». La taille de la police qui est écrite à l'intérieur de ces divs est définie sur «30px». Maintenant, regardez la capture d'écran de sortie sous ce code.
Ici, l'espace ou l'espace entre les lignes est «20px» et l'espace entre les colonnes est «40px» dans la capture d'écran donnée.
Exemple n ° 2:
Dans cet exemple, nous avons huit divs à l'intérieur de la div principale «Grid-Contintainer». Nous appliquerons la propriété «Grid-Gap» à ce code qui est la propriété raccourci sur «grid-column-gap» et «grid-row-gap». Nous allons définir à la fois l'écart de colonne et l'écart de ligne à l'intérieur de cette seule propriété «Grid-Gap».
Nous utilisons la «couleur» de la rubrique comme «orange» et «text-decoration» est définie ici pour «souligner». De plus, la «Font-Family» est «algérienne». Ensuite, nous définissons la «grille» pour la propriété «Affichage» et dans le «Grid-Template-Column», nous utilisons quatre «Auto», nous obtiendrons donc quatre colonnes dans la sortie.
Après cela, nous avons la propriété «Grid-Gap» dans laquelle nous avons réglé la taille de l'espace en «%» pour les colonnes et les rangées de la grille. Nous l'avons réglé sur «5%», il créera donc un espace de «5%» entre les colonnes et «5%» entre les lignes. Nous utilisons la «couleur arrière. ontainer ». Nous appliquons la «couleur arrière.8), qui est «vert léger» et aussi, nous avons un «0.Valeur alpha de 8 ”, il montre donc une certaine transparence.
Nous alignons le texte en «centre» et le «rembourrage» pour le «haut» et le «bas» est «20px» et «0» est pour le rembourrage «gauche» et «droit». La «taille de police» est «30px» dans ce code.
Dans la capture d'écran donnée, il y a quatre colonnes et l'espace entre les lignes et les colonnes est «5%», car nous l'avons réglé dans la propriété «Grid-Gap».
Exemple # 3:
Ici, nous avons douze divs dans cet exemple et nous appliquerons la propriété «Grid-Gap» sur ces. De plus, nous définirons la valeur de cette propriété «Grid-Gap» dans «PX» dans le code CSS.
Pour le «corps», nous utilisons l'attribut «Text-Align» et le fixons à «Centre». Le «style de police» est «italique». Ensuite, nous ajoutons la valeur «Grid» pour la propriété «Affichage». Nous utilisons quatre «Auto» dans la propriété «Grid-Template-Colonne» pour obtenir quatre colonnes dans la sortie. Après cela, nous avons la propriété «Grid-Gap», qui nous permet de spécifier la taille de l'espace en «pixel» pour les colonnes et les lignes de la grille. Nous l'avons réglé sur «50px», ce qui signifie qu'il y aura «50px» d'espace entre les colonnes et «50px» entre les lignes. Le «Color en arrière-plan» est réglé sur «Pink». De plus, nous créons une «frontière» pour cette div principale qui est définie sur «1px Solid Black».
Ici, nous avons «10px» du «rembourrage». Maintenant, nous définissons la «couleur d'arrière-plan» des Divs intérieurs au format «RGBA» et le définissons sur «RGBA (204, 90, 90, 0.8) ”qui montre la transparence pour cette couleur. La valeur de transparence ici est «0.8 ”. Le «rembourrage», la «taille de la police» et la «Font-Family» sont les mêmes que nous avons utilisés dans les exemples ci-dessus.
Cela montre que nous avons quatre colonnes dans la sortie et que l'espace entre les lignes de la grille et les colonnes de la grille est «50px» ici.
Conclusion
L'objectif de ce tutoriel est de vous aider à comprendre comment utiliser la propriété CSS «Grid-Gap». Dans ce tutoriel, nous avons examiné la propriété CSS «Grid-Gap» et décrit ce que signifie la propriété «Grip-Gap», pourquoi nous utilisons cette propriété, comment l'utiliser et comment il renvoie la sortie. L'utilisation du «Grid-Gap» a déjà été discutée ici. Nous avons expliqué cette propriété que nous avons utilisée pour régler la taille de l'espace entre les lignes et les colonnes de la grille. Nous avons également montré des exemples d'utilisation de la propriété «Grid-Gap», ainsi que les résultats de tous les exemples de ce tutoriel.