Introduction à la grille CSS : créer votre propre portfolio en ligne

1. Introduction au cours: Bonjour, je m'appelle Luke Faddish, je suis développeur de logiciels professionnel depuis près de 20 ans maintenant. Mais aujourd'hui, je suis super excité de commencer notre cours. Dans cette classe, nous allons apprendre comment nous pouvons utiliser grille CSS pour construire un portfolio web en ligne. Si vous n'êtes pas familier, cupidité CSS est la nouvelle norme CSS pour la mise en page de pages web complexes. Auparavant, pour ce faire, nous devions utiliser de grands frameworks comme bootstrap et foundation, ou un tas de hacks CSS qui s'affichaient différemment dans chaque navigateur et c'est le problème que CSS grid résout pour nous. Au cours de cette classe, mettra en œuvre ce portefeuille Web en ligne qui ressemble et fonctionne très bien dans les appareils de bureau et mobiles. J' ai également mis un tas de ressources dans la zone du projet pour le rendre super facile de démarrer votre projet. Je serai avec vous à chaque étape pendant ce cours, donc si vous rencontrez des problèmes ou avez besoin d'aide, n'hésitez pas à me le faire savoir dans la zone de discussion communautaire de ce cours. Sinon, j'ai hâte de voir ce que vous construisez avec la grille CSS. 2. À qui s'adresse ce cours: Pour qui est ce cours ? Cette classe est destinée à tous ceux qui veulent apprendre à créer une mise en page Web à l'aide de lignes et de colonnes. C' est ce que CSS nous donne. Il s'agit d'une classe de niveau intermédiaire. Je suppose que vous connaissez déjà un peu HTML, CSS, et que vous pouvez utiliser un éditeur de texte. Si ce n'est pas le cas, ne vous inquiétez pas parce que nous sommes ici sur le partage des compétences. Vous pouvez trouver des classes sur toutes ces choses avec une recherche très rapide. Partez et faites-le si vous en avez besoin, puis revenez à cette classe. Sinon, asseyez-vous bien pour la prochaine leçon, où nous examinerons en détail ce que nous allons apprendre pendant ce cours. 3. Ce que nous allons couvrir dans ce cours: Bienvenue à notre leçon de grille CSS. Ce sera un aperçu très rapide de ce que vous allez apprendre dans cette classe. La toute première chose que nous devons faire est de parler de quelle grille CSS et pour en apprendre davantage, nous devons savoir ce qu'est un système de mise en page dans CSS. On parlera de ce que c'est. Nous parlerons d'autres systèmes de mise en page CSS. Nous verrons comment la grille CSS est différente et enfin, où nous pouvons l'utiliser. Ensuite, nous allons voir comment nous pouvons définir les colonnes de grille CSS, nous devrons utiliser la grille d'affichage. Nous allons découvrir comment créer des colonnes en utilisant des colonnes de modèle de grille qui est une règle de style CSS. Ensuite, nous découvrirons ce qu'est l'unité de FR quand nous mesurons des colonnes. Ensuite, nous allons travailler sur un exemple très simple qui démontre l'utilisation des règles de style CSS. Après cela, nous allons créer une mise en page plus complète et complète. C' est là que nous commencerons sur notre projet de classe, qui est le portefeuille. Nous allons apprendre comment nous pouvons peindre une grille en utilisant des zones de modèle de grille. Nous verrons sur la zone de la grille, les enfants, et nous travaillerons sur notre projet principal. Comme je l'ai dit, le portfolio nous allons également passer un peu de temps à parler de la façon dont nous pouvons positionner le contenu à l'intérieur des colonnes. Pour cela, nous allons utiliser la règle de justification auto CSS et aussi align-self. Ensuite, nous allons travailler à faire de l'espace dans la grille, en utilisant l'écart de grille. La dernière chose dont nous avons vraiment besoin de parler est de savoir comment nous pouvons rendre notre mise en page de la grille réactive. Comment pouvons-nous le rendre agréable sur les navigateurs de bureau et sur les navigateurs mobiles et téléphoniques ainsi. Nous rendrons notre mise en page réactive et nous utiliserons @ requêtes média pour définir différentes mises en page. Asseyez-vous bien pour la prochaine vidéo, où nous allons parler de ce que la grille CSS est réellement. 4. Qu'est-: Bonjour à tous, bienvenue à notre introduction sur la grille CSS. Dans cette vidéo, nous allons parler de ce qu'est réellement la grille. Avant de parler de cela, nous devons vraiment parler de ce que sont le système de mise en page est parce que cela dit grille est un nouveau système de mise en page. Le système de mise en page est un ensemble de règles que les navigateurs Web utilisent pour organiser les éléments d'une page de façon prévisible. On dirait un petit poème. Le point ici est que les navigateurs utilisent cet ensemble standard de règles pour organiser nos éléments, c'est-à-dire comme H1, divs et travées, et des choses comme ça d'une manière prévisible. Les pages Web semblent plus ou moins identiques dans différents navigateurs et définir la mise en page CSS par défaut est de traiter tout comme une boîte. Les choses sont soit empilées les unes sur les autres, soit à côté de l'autre. Si nous avons une page web, ce dégradé est comme la page web ici. Nous pourrions avoir comme un grand div large qui traverse comme un en-tête. Notre section principale serait empilée en dessous, nous ne sommes pas vraiment empilés les uns sur les autres, l'empilement en dessous, mais vous comprenez l'idée. Puis à l'intérieur, nous avons des choses qui sont à côté ou au-dessus de l'autre. C' était génial quand les sites Web ressemblaient à ça. Mais depuis lors, nous avons piraté le système de mise en page par défaut afin que nous puissions rendre les pages Web plus semblables à ceci. Si nous ne voulons pas que nos pages Web ressemblent à un journal, nous voulons quand même que les choses soient organisées en lignes et en colonnes. Vous pouvez voir ici que j'ai tracé quelques lignes pour montrer de quoi on parle ici. Ce que la grille CSS peut faire pour nous est de définir des lignes. Maintenant, une rangée serait cette section où nous avons des nouvelles, le gros titre là-bas, puis en dessous, nous avons une autre ligne qui contient tout le contenu des nouvelles. Ensuite, nous pouvons définir des colonnes. Vous pouvez voir que le contenu des nouvelles comme cette deuxième rangée là-bas, avec des choses à l'intérieur. Vous pouvez définir des colonnes dans lesquelles placer les choses. On peut arranger les choses à l'intérieur de ces colonnes. Maintenant, c'est là que le système de mise en page CSS standard revient en jeu. Les choses y seront arrangées de la manière habituelle. C' est juste que nous avons coupé certaines parties de la page afin qu'elles soient traitées un peu différemment. C' est le système de mise en page de la grille CSS. Cependant, cela nous donne la possibilité d'organiser les choses à l'intérieur de ces colonnes un peu différemment aussi. Nous pouvons les utiliser différentes règles de style pour les centrer horizontalement ou verticalement, ce qui a toujours été un défi CSS majeur. Nous pourrions aussi créer des gouttières. Maintenant, les gouttières sont ces espaces entre les rangées et les colonnes qui donnent à notre page un peu d'espace pour respirer l'espace que les choses ne la font pas paraître trop bondées. Y a-t-il un accroc à l'utilisation de la grille CSS en moment car il fait toutes ces choses géniales pour nous ? C' est la capture ici au moment de l'enregistrement de cette vidéo 75.34 pour cent de l'Internet utilise un navigateur qui prend en charge la grille CSS. Maintenant, ce n'est pas vraiment une prise parce que ce nombre augmente constamment et il augmente assez rapidement. Cependant, vous devez savoir que si vous utilisez la grille CSS sur un site Web ou environ les trois quarts d'Internet, allez pouvoir l'utiliser comme vous l'aviez prévu pour l'utiliser. Mais comme je l'ai dit, ce nombre augmente constamment. Je pense que la grille CSS est quelque chose que nous devons tous apprendre pour l'avenir. 5. Comment définir des colonnes de grille CSS: Bonjour et bienvenue à notre introduction à la grille CSS, où nous allons construire notre propre portefeuille en ligne. Dans cette leçon, nous n'allons pas travailler sur notre portefeuille. Nous allons commencer à définir des CSS dans les colonnes de grille, et nous allons utiliser un autre petit exemple de page pour le faire. Qu' est-ce qu'on va couvrir dans cette vidéo ? Nous allons voir comment nous pouvons définir les colonnes de grille CSS. Nous allons découvrir ce qu'est l'unité de Fr. Nous allons organiser le contenu à l'intérieur d'une colonne, et nous le ferons en construisant cette drôle de petite page d'exemple ici. Vous pouvez voir où les inclinaisons et le contenu sur la page. La toute première chose que nous devons faire est de vérifier le HTML que nous allons utiliser pour le faire. Maintenant, nous n'allons pas modifier ce HTML. Nous allons seulement travailler avec notre CSS. Cependant, c'est une excellente idée pour nous de connaître la structure de la page avec laquelle nous travaillons lorsque nous éditons notre CSS. Tout le code avec lequel nous travaillons aujourd'hui est disponible dans la section des ressources du projet et dans la colonne de grille CSS, example.zip. Vous pouvez trouver le HTML, le CSS et les images que nous utilisons pour cette petite page afin que vous puissiez travailler avec elle aussi. Mais d'abord, voici notre HTML. Ici, nous sommes dans notre code en regardant le HTML et vous pouvez voir que nous avons une page Web HTML assez typique. Nous établissons des liens vers nos colonnes de grille CSS, .CSS ici. Ensuite, nous descendons pour regarder le corps de la page Web, qui est le peu qui nous intéresse. Vous pouvez voir que nous avons un actif contenant avec conteneur de classe et à l'intérieur que nous avons une série d'autres. L'un d'eux a un H1 dedans, puis quatre ont des images à l'intérieur : route 1, 2, 3, et 4. jpg Ensuite, nous avons enfin quelques crédits. C' est là que nous obtenons nos pêches de route et c'est tout ce qu'il y a à notre HTML. Comme je l'ai dit, nous n'allons pas éditer cela, mais nous devons savoir que nous avons un conteneur de classe avec et à l'intérieur que <div> nous avons une série <div> d'autres qui contiennent notre contenu. Ensuite, nous allons avoir une petite introduction à notre CSS. Voici notre CSS actuel. Comme vous pouvez le voir, c'est assez simple. Nous avons mis en place une topographie pour le corps et réinitialisé nos marges à zéro. Nous donnons à notre H1 une grande taille de police et nous avons dit que toutes nos images vont occuper 100 pour cent du conteneur dans lequel elles se trouvent. Puis ici, nous avons ces deux petits sélecteurs CSS solitaires, conteneur et ensuite est à l'intérieur du conteneur et c'est là que nous allons mettre notre code de grille CSS. Revenons à la présentation et voyons ce que nous allons faire pour mettre en œuvre notre petite page Web. abord, jetons un coup d'oeil à l'apparence de notre page web en ce moment sans notre code de grille CSS et le voici. Comme vous pouvez le voir, il a l'air assez pourri. Nous avons ces images énormes et notre en-tête en haut et ensuite nos crédits en bas. Cela ne ressemble pas à l'exemple que nous avons vu dans la présentation. Continuons à réparer ça maintenant. Notre toute première règle de style de grille sera la grille d'affichage. Comme vous le savez, nous pouvons définir notre règle d'affichage pour bloquer ou bloquer en ligne ou en ligne ou en flex la grille CSS. Si nous allons superposer les choses en utilisant le système de mise en page de grille CSS, nous devons définir la valeur d'affichage ou la règle d'affichage sur grille. Cela va sur le sélecteur de l'élément parent. C' est l'élément qui contient tout le reste qui va être organisé dans la grille. Faisons ça maintenant. Ici, nous sommes de retour dans notre CSS et vous pouvez voir que nous avons notre classe de conteneur. Rappelez-vous, il s'agit de l'élément qui contient le reste du contenu de la page Web. La première chose que je vais faire est de dire affichage, tapez une grille. Cela aussi n'aidera pas vraiment notre page web parce que si je recharge cela et que vous voyez tout ce que nous avons réussi à faire est de coller nos crédits sur le dessus de nos images et tout le reste est assez érotiquement. Nous pouvons commencer à corriger ce problème en appliquant notre prochain style de grille CSS, qui est la règle de style grid-template-colonnes. C' est la règle que nous utilisons pour définir le nombre colonnes que notre grille va avoir et la taille qu'elles sont, et attendre. C' est l'une des façons que nous pouvons utiliser pour décrire la taille de ces colonnes. Nous utilisons cette unité curieuse appelée fr. Maintenant, nous pourrions facilement utiliser une valeur de pourcentage, une valeur de M, une valeur de pixel, à peu près tout autre type d'unité que vous pouvez utiliser en CSS, vous pouvez mettre ici. Cependant, j'utilise l'unité fr parce que c'est assez idiomatique pour la grille CSS et aussi parce que c'est une chose assez intéressante. Ce que fr signifie est fraction et quand nous avons 1fr 1fr 1fr, cela semble un peu bizarre, nous n'avons rien à relier cette valeur. Mais ce que cela signifie en fait, c'est parce que nous avons spécifié trois valeurs ici, qui dit à la grille CSS que nous voulons qu'elle soit découpée en trois bits et parce que chaque valeur un et un est égale, cela signifie que chacun est va être équivalent à un tiers de la page. Maintenant, je dois vous dire, j'ai eu un peu de mal avec toute cette idée de FR au début parce que cela semble vraiment intuitif. Je veux trois bits et je veux qu'ils soient de taille égale, mais je ne suis pas habitué à un ordinateur qui pense autant pour moi. C' est tellement intuitif pour moi que je l'ai trouvé contre-intuitif. Je ne sais pas ce que tu penses de ça. Cependant, si nous avions dit 2fr 1fr, alors il y avait encore trois mesures fournies, mais la première était deux et les autres, une ; cela signifierait que la première occuperait 50 pour cent de la page et les deux autres occuperaient chacun 25 p. 100. Maintenant, nous allons avoir un peu plus d'un coup d'oeil sur le fonctionnement de l'unité fr plus tard dans la classe. Cependant, pour l'instant, jetons un coup d'oeil et voyons comment cela affecte la mise en page de notre page Web. Ici, nous soutenons dans notre CSS et grid-template-columns doit aller dans l'élément parent, l'élément qui contiendra ou tiendra tout le reste que nous voulons être organisés en utilisant des colonnes de grille CSS. On peut dire 1fr 1fr 1fr, on peut le sauver. Ensuite, nous pouvons retourner à notre page web et le recharger et sainte Molly, coup tout est organisé. Vous pouvez voir que nous avons spécifié qu'il y a trois colonnes, mais si vous vous souvenez dans notre HTML, nous avons comme 1, 2, 3, 4, 5, 6 s ici et parce que nous avons spécifié plus d'éléments que nous avons des colonnes, ce que CSS grille a fait pour nous est de les envelopper à une nouvelle rangée. C' est très pratique, non ? Nous avons chacun de ces éléments occupant un tiers de l'écran et de la grille CSS, parce que nous avons spécifié trois colonnes en lui donnant six choses à afficher, il les enveloppe à une nouvelle ligne et les expose toujours dans des colonnes paires. Quelque chose que je devrais mentionner, vous pourriez vous demander, eh bien, si j'avais 20 colonnes, devrais-je écrire 1 fr 20 fois ? Ce serait vraiment ennuyeux. Heureusement, nous avons dans la grille CSS cette chose appelée repeat, qui est cette petite fonction CSS rapide qui dit que nous voulons x nombre de choses d'une taille particulière. Dans ce cas, nous pouvons dire que nous aurons trois 1frs et le résultat est que si je recharge que c'est exactement la même chose, nous pouvons voir que nos routes manchettes et nos crédits sont bloqués en haut à gauche de leurs cellules et nous aimerions réparer ça. Merci beaucoup. Voyons ce que CSS nous pouvons utiliser dans le système de mise en page de grille CSS pour corriger cela. C' est vraiment un sujet d'organisation du contenu à l'intérieur d'une colonne. Maintenant, nous allons utiliser la règle justify-self, center et align-self : center. Qu'est-ce que ça veut dire ? Justify-self parle d'organiser les choses horizontalement. On peut avoir le centre, droite, la gauche, et ainsi de suite. Dans ce cas, nous le mettons au centre, donc nous voulons que les choses soient au milieu, horizontalement. Ensuite, l'alignement de soi consiste à aligner les choses verticalement, sorte que nous puissions coller les choses en haut, en bas ou n'importe où d'une cellule. Dans ce cas, encore une fois, nous voulons qu'il soit au centre. Maintenant, nous appliquons ceci à quelque chose qui se trouve à l'intérieur de notre conteneur de grille, pas au conteneur de grille lui-même. Tu verras ce que je veux dire dans un instant. Ici, nous sommes à nouveau dans notre CSS, et cette fois nous voulons appliquer les règles justifie-self et align-self aux <div> s qui sont à l'intérieur de notre conteneur. On y va. Si nous retournons à notre page et rechargeons, vous pouvez voir que nos titres de routes et nos crédits sont apparus au milieu des cellules. Ceci est une introduction super rapide sur la façon dont nous pouvons utiliser règles de grille CSS pour mettre le contenu dans une page Web en utilisant simplement des colonnes. Nous n'avons pas encore commencé à parler d'utiliser des lignes. Juste un résumé rapide. Afin de dire au navigateur que nous utilisons la grille CSS, nous devons définir la règle d'affichage d'un élément conteneur sur grille. Nous pouvons spécifier le nombre de colonnes que nous voulons dans notre grille en utilisant la règle grid-template-columns. Nous pouvons soit spécifier chaque colonne individuellement, soit nous pouvons utiliser cette fonction de répétition pour spécifier le nombre de colonnes que nous voulons. Pour organiser le contenu à l'intérieur de notre conteneur de grille CSS, nous pouvons utiliser la règle justify-self et la règle align-self. Justify-self est pour organiser les choses horizontalement et aligner soi-même est pour les organiser verticalement. Maintenant, accrochez serré pour la prochaine leçon où nous commençons sur notre projet de portefeuille et nous voyons comment nous pouvons organiser les choses avec les colonnes et les lignes dans la grille CSS. 6. Comment créer une mise en page avec des lignes et des colonne: Bienvenue à cette introduction à la grille CSS où nous avons construit un portfolio en ligne en utilisant la grille CSS. C' est là que nous définissons des lignes et des colonnes et c'est aussi là que nous commençons notre projet. Alors, qu'est-ce qu'on va couvrir dans cette vidéo ? Nous allons apprendre à définir une mise en page à l'aide d'une règle de grille CSS appelée zones de modèle de grille. Ensuite, nous allons utiliser une nouvelle zone de grille de règles pour mettre des éléments dans la mise en page. C' est-à-dire les placer à l'intérieur de la mise en page que nous avons définie avec des zones de modèle de grille. Comme je l'ai dit, c'est là que nous allons commencer notre petite page de portefeuille, et juste pour voir à quoi ça ressemble. Ici, nous l'avons juste ici. Voici donc notre exemple de page de portefeuille. Nous avons une image de studio de paysage ou de portrait et une image commerciale. Évidemment, vous pouvez avoir ce que vous voulez à l'intérieur de cette zone d'image. Vous pouvez avoir un petit diaporama. Je viens d'avoir une seule image et chacun de ces liens vers une page HTML séparée avec exactement la même structure. La seule différence étant que chacun affiche une image différente. aurait été beaucoup plus agréable d'utiliser une page HTML et peut-être avoir du JavaScript ou quelque chose pour basculer entre nos images. Mais pour rester à apprendre sur la grille CSS, j'ai gardé les choses aussi simples que possible ici. C' est donc ce que nous allons commencer pendant cette leçon. Donc, la première chose que nous ferions mieux de vérifier est le HTML qui définit la structure de la page. On y va. Voici notre page HTML de paysage. Comme je l'ai dit, le studio de portrait paysager et pages commerciales sont fondamentalement les mêmes. Ils s'affichent juste à une image différente et il n'y a rien de trop choquant ici. Nous avons une section de tête HTML assez standard. Ensuite, nous entrons dans le corps, notre contenu est contenu dans un élément principal juste ici. Ensuite, nous allons dans notre H1. Ensuite, nous avons notre navigation, qui est notre portefeuille et notre navigation. Ensuite, c'est un petit élément nav avec ID portfolio nav. Ce sont des identifiants, nous verrons pourquoi ils sont importants bientôt. suite, nous avons notre article de portefeuille qui est la chose qui apparaît dans la page du portefeuille, et nous sommes simplement liés à une image. Encore une fois pour la brièveté, j'ai codé p1.jpg. Puis un peu de copyright à vous, vous mettez votre nom là-dedans. Enfin, au bas, nous avons un peu de navigation sur le site qui est un autre morceau de navigation avec un NAV de site d'identification, puis juste quelques liens qui vont vers d'autres parties du site. Je viens d'utiliser un href « # » ici, ou une livre. Encore une fois, parce qu'il s'agit d'un exemple de page Web. Encore une fois, nous n'allons pas éditer ce HTML pendant cette classe parce que nous nous concentrons sur la grille CSS pour CSS. En parlant de ce que nous devrions vérifier notre CSS aussi et le voici. Je dois mentionner qu'une fois de plus, j'ai le HTML, les images et CSS pour cette page de portefeuille dans un fichier zip appelé CSS grid portfolio, project.zip. Cela a tout le HTML dont vous avez besoin, les images et le fichier portfolio.CSS sans le CSS spécifique à la grille CSS à l'intérieur. C' est à vous de le remplir pendant que vous faites votre projet. La plupart du contenu existant ici concerne la typographie. Nous avons une règle pour nos images, qui est de les étirer à nouveau à l'espace disponible qu'elles ont lorsqu'elles sont placées dans la mise en page. Ensuite, tout le reste est à peu près juste de définir du texte, des styles et des tailles. Donc rien de grille n'y est lié. Il est maintenant temps d'implémenter notre toute première règle de style de grille CSS. Tout comme la dernière fois, nous allons définir notre élément contenant dans ce cas, c'est l'élément principal de notre HTML. Nous allons définir cela pour avoir une règle d'affichage égale à la grille. Donc, nous sommes ici dans notre code que je viens de mettre dans la grille d'affichage principale. Avant de faire quoi que ce soit d'autre, nous devrions aller voir à quoi ressemble la page Web en ce moment. Nous avons juste regardé une version complète. Voyons à quoi ça ressemble sans notre style de grille. Sauve ça et on y va. Donc c'est à ça qu'il ressemble pour le moment, pas trop joli bien que montrant la photo très bien. Mais ce n'est pas comme ça qu'on veut. Donc je vais juste remettre ça là-dedans, lui donner une sauvegarde, recharger et regarder pas grand-chose a changé. Mais nous allons revenir à la mise en œuvre du reste de cette grille maintenant. La prochaine chose que nous voulons faire, comme la dernière fois, nous allons mettre en place des colonnes et c'est un peu différent cette fois. Nous utilisons notre unité fractionnée de la page pour une colonne, puis trois d'entre elles et ensuite 0,1 d'entre elles. Je ne sais pas pour vous, mais je ne trouve pas super facile d' ajouter tout cela et de penser à la façon dont il sort dans la mise en page réelle. Fondamentalement ce que j'ai fait, c'est que j'ai décidé que je veux que mes colonnes soient, puis les ajuster jusqu'à ce qu'elles aient l'air droit Mais nous allons mettre ça pour l'instant et puis quand nous allons parcourir cette vidéo un peu plus, nous serons en mesure de voir plus clairement comment cela se déroule réellement. Donc, de retour dans notre code ajouter ou encore une fois dira modèle de grille colonnes 1fr, 3fr, 0.1fr. Comment ça donne l'air de la page ? Un peu fou. C' est comme ça que ça a l'air. Mais si nous passons à la partie suivante de cette vidéo, nous verrons comment nous pouvons réorganiser tout cela pour la mettre en page comme nous le voulons. C' est donc là que nous arrivons à décrire l'apparence de la couche et que la règle CSS que nous allons utiliser est des zones de modèle de grille. Maintenant, c'est une façon de définir comment le contenu se trouve dans les lignes et les colonnes. Maintenant, il y a beaucoup de façons différentes de le faire dans la grille CSS. Personnellement, je trouve cela la façon la plus intuitive d'y penser, c' est pourquoi je l'ai fait ici et je m'y suis généralement tenu dans mon propre travail. Mais c'est la valeur que nous avons utilisée que je comprends qu'elle ressemble à beaucoup de choses juste là. Mais si on y passe, on peut voir qu'il y a trois cordes ici. Chacune de ces chaînes représente une ligne. Donc, nous avons en-tête, en-tête, c'est la première ligne, puis nav de portefeuille, élément de portefeuille, c'est la deuxième ligne, puis nav de portefeuille et navigation de site, c'est la troisième ligne. Alors voyons à quoi cela ressemble réellement. Si nous avons ce grand rectangle gris ici, prétendons que c'est notre page Web. Si nous regardons de nouveau nos colonnes, nous pouvons voir que notre première colonne occupe environ un peu moins d'un quart du côté gauche. Ensuite, nous avons presque les trois quarts pris au milieu. Ensuite, à l'extrême droite, nous avons le 0.1fr. C' est une minuscule petite colonne au-dessus de l'extrémité, et c'est ce que j'utilise comme un peu de données de ce côté. C' est à quoi ressemblent nos colonnes, mais voyons comment notre contenu peut être mis en page en utilisant cette valeur grille-template-zones. Encore une fois, pour référence, voici cette valeur et nous allons juste la plop dans le coin inférieur là-bas. Si vous regardez la première ligne lorsque quelque chose se répète deux fois ou plus d'une fois, cela signifie qu'il s'étend sur les colonnes ou les lignes. Nous avons un en-tête ici qui apparaît dans la première rangée, et cela signifie qu'il va occuper deux colonnes. Ensuite, nous avons portfolio-nav, puis portfolio-article. Nous pouvons voir que nous avons dit, ok, portfolio-nav va prendre la première colonne et ensuite portfolio-article va sortir la deuxième colonne. Ensuite, quand nous descendons à la troisième rangée, nous avons de nouveau portfolio-nav et nous pouvons voir qu'il s'étend sur plusieurs rangées. Puis enfin, pour remplir le dernier morceau de cette ligne et colonne, nous avons notre site-nav. Maintenant, comme je l'ai dit, il existe différentes façons dans la grille CSS que nous pouvons définir lignes et des colonnes et comment les éléments s'étendent sur eux ; comment ils remplissent l'espace entre ces lignes et colonnes. Comme je l'ai dit, je trouve c'est le moyen le plus intuitif et le plus simple de les exprimer et de les comprendre. La prochaine chose que nous devrions faire est de mettre ce code dans notre CSS. Si vous jouez à la maison avec votre fichier CSS de démarrage, veuillez le mettre ici aussi. Nous faisons en ligne juste pour la clarté, vraiment. Portfolio-NAV suivi de portefeuilles et d'une autre nouvelle ligne. Puis portfolio-nav suivi de site-nav. C' est bien et bien. Mais comment mettre les choses là-dedans ? Dites, nous voulons que cette partie de la page aille dans la première ligne et s'étend sur deux colonnes, puis nous voulons que la partie suivante s'adapte ici, puis la partie suivante à côté de cela. C' est comme ça que nous le faisons. Remplacez les éléments de la mise en page à l'aide de cette règle CSS de zone de grille. Ces valeurs sont directement liées aux valeurs de nos zones de modèle de grille. Vous voyez qu'on a un en-tête ici. Laissez-moi passer ici et voici l'en-tête une fois de plus et remarquez qu'il n'a pas de guillemets autour d'elle, ce qui est tout à fait différent. C' est comme si nous avions créé un nouveau mot réservé CSS, mais nous ne l'avons pas fait. Nous venons de donner un nom à une section de notre mise en page que nous utiliserons plus tard et nous l'utiliserons en utilisant la zone de grille. Ce que nous allons faire est de définir quelques-unes d' elles et elles sont toutes liées aux valeurs dans les zones de grille. Ce que nous faisons, c'est que nous entrons dans notre code là où nous sommes ici. Ensuite, nous disons, nous voulions que H1 ait une valeur de zone de grille d'en-tête. Si vous pouvez réellement voir ici très clairement, que nous ne disons pas, nous voulons que notre H1 s'étend sur deux colonnes. Ensuite, si vous vous souvenez, dans notre HTML, nous avons ces différents éléments : nav avec portfolio et ID de portfolio-nav, puis un div avec un ID de portfolio-item et un ID de site-nav pour celui-ci. Vous pouvez voir qu'ils se rapportent aux valeurs utilisées dans les zones de modèle de grille. On n'est pas obligés de faire ça. Je leur ai donné le même nom pour plus de clarté, et pour nous aider à comprendre comment ils se rapportent ensemble. Nous pouvons leur donner n'importe quel nom que nous aimons, puis nous pouvons les mettre ensemble dans le CSS et la mise en page de la grille CSS les placera à l'endroit approprié. Nous allons dire élément portfolio-nav, nous dirons grille portfolio-nav et ensuite, bien sûr, nous dirons portefeuilles article. Puis enfin, notre site-nav prend une zone de grille de site-nav. Maintenant, nous pouvons enregistrer cela et jeter un oeil à comment cela fonctionne dans notre page Web. Voici notre page web, comme nous l'avons vu pour la dernière fois, un site assez, désolé. Si je recharge, vous pouvez voir que ça a l'air beaucoup mieux. Ce n'est pas encore tout le chemin, mais nous pouvons voir que notre page est beaucoup plus proche de ce que nous voulons. De plus, nous pouvons voir qu'il a été présenté selon cette règle CSS grille-template-zones. On a notre portefeuille. Vous ne pouvez pas vraiment voir que ça couvre tout le chemin d'ici, mais c'est le cas. Ensuite, nous avons notre navigation de portefeuille sur le côté, puis notre article de portefeuille sur le côté droit ici. Enfin, nous avons la navigation de notre site cachée en dessous. Vous pouvez voir comment nous avons utilisé notre règle CSS de zones de grille pour décrire une mise en page, puis comment nous avons utilisé la règle CSS de zone de grille pour placer des éléments individuels dans cette couche. Maintenant, asseyez-vous bien pour la prochaine vidéo où nous allons organiser notre contenu un peu plus bien dans notre mise en page. 7. Comment positionner le contenu dans des colonnes de grille.: D' accord. Bienvenue à notre Introduction à la grille CSS. Maintenant, il est temps de commencer à positionner certains de ces éléments dans notre mise en page parce que nous pouvons voir cela et des choses ici qui ne sont pas tout à fait correctes. Nous ne voulons pas de notre en-tête de portefeuille jusqu'ici. Nous le voulons à droite, et la navigation ici pour les différentes pièces de portefeuille devrait être faite au milieu ici, plutôt que poussé vers le haut où il est maintenant. C' est ce que nous allons corriger dans cette vidéo. Qu' est-ce qu'on va regarder ? Quelque chose que nous avons déjà couvert, qui est la règle de légitime soi et les règles d'alignement de soi. Nous allons également faire de l'espace dans notre mise en page en utilisant la règle de grille CSS de l'écart de grille. La première chose que nous voulons faire est de pousser notre h1 tout le chemin vers la droite, et nous le ferons avec la règle d'autonomie justifie définie sur la valeur, à droite. Ici, nous sommes dans notre code et nous allons juste l'éclater en ce moment, justifie-moi, non. Sauve ça. Donnez à cette page un rechargement, et nous pouvons dire que notre en-tête de portefeuille a sauté jusqu'à droite. Ensuite, nous voulons corriger notre navigation de portefeuille. Pour notre portfolio nav ID pour notre élément, nous voulons lui donner la valeur align-self du centre qui est un moyen de l'aligner verticalement au milieu. Voici notre portefeuille nav CSS, et nous pouvons dire align-self, centre. Si nous donnons à notre page un rechargement, nous y allons, met notre navigation de portefeuille au milieu. Nous pouvons dire que notre page commence à regarder et à travailler comme nous le voulons. Mais il y a une autre chose que nous voulons faire, qui est de créer un écart entre nos lignes et nos colonnes, et nous allons donner à cela une valeur de 1em. Cela va également sur l'élément principal, et c'est l'élément parent de notre grille CSS. C' est l'élément qui contient la grille. C' est là que nous disons grille d'affichage, et c'est là que nous assignons les zones de modèle de grille. Nous le faisons ici parce que c'est quelque chose qui affecte le comportement de toute la disposition de la grille. On dira l'écart de grille 1em. Maintenant, cela affecte les lignes et les colonnes. Maintenant, nous avons grille-range-gap et nous avons aussi grille-colonne-gap. Maintenant, ces règles peuvent être utilisées pour spécifier différentes valeurs pour les espaces entre les lignes et les colonnes. Mais parce que je veux la même valeur pour l'écart entre les lignes et les colonnes, je peux simplement utiliser l'écart de grille comme raccourci. Je vais enregistrer cela et mettre à jour notre navigateur, et vous pouvez voir que nous avons juste mis un peu d'espace entre tout. Il pourrait y avoir plus d'espace entre notre image et le portfolio, l'en-tête et la navigation en bas, et cela vient juste un peu plus d'espace dans notre mise en page. C' est à peu près tout ce que nous voulons faire avec cette page dans sa forme actuelle. Cependant, si nous sortons de notre mode plein écran ici, et que je prends ce gars et commence à le rendre un peu plus petit, plus petit, plus petit, et plus petit, vous pouvez voir que ce n'est pas vraiment une mise en page conviviale pour les mobiles. La prochaine chose que nous allons faire est de mettre à jour notre CSS pour le rendre sensible à la taille du navigateur, sorte qu'il affiche une mise en page appropriée pour les appareils mobiles lorsque le navigateur est petit comme celui-ci. 8. Comment créer une version réactive du projet CSS Grid.: Bon, bienvenue à l'Introduction à CSS Grid. Dans cette vidéo, nous allons voir comment nous pouvons rendre notre mise en page de grille responsable. Qui est à dire, comment pouvons-nous le faire afficher bien dans les navigateurs de bureau et mobiles ? Qu'est-ce qu'on va regarder en ce moment ? Nous allons voir comment nous pouvons utiliser les requêtes de médias CSS, et les zones de modèle de grille CSS règle ensemble pour montrer différentes mises en page dans différentes tailles de navigateurs. Comment allons-nous faire cela ? Eh bien, ce que nous faisons est de redéfinir nos colonnes de modèle de grille et les zones de modèle de grille, les règles CSS de sorte que nous n'avons fondamentalement qu'une seule colonne et ensuite nous mettons toutes nos différentes zones, l' une au-dessus de l'autre, qui est assez proche de la façon normale que les choses sont disposées de toute façon. Mais c'est une façon que nous pouvons utiliser notre modèle de grille pour réorganiser nos éléments lorsque le navigateur est plus grand ou plus petit.Ici, nous sommes dans notre code et je vais pousser droit vers le bas et créer une requête média.Disons 600 pixels. Cela peut être notre bon point et maintenant ce que je vais faire est de configurer notre CSS par défaut à un écran mobile, puis lorsque notre navigateur a une taille maximale supérieure à 600 pixels, alors nous pouvons avoir une mise en page de bureau.Je vais prendre bureau mise en page et je vais saisir cela et mettre cela là-bas, nous voulons que cela soit dans l'élément principal. Ceci est pour le bureau et il suffit de mettre un petit commentaire là-dedans. Vous vous souvenez .Fine , puis nous revenons à nos colonnes de modèle de grille et les zones de modèle de grille et de dire, eh bien, nous ne voulons qu'une colonne maintenant grâce juste comme ça et puis nous dirons que nous avons notre en-tête. Ensuite, nous aurons notre navigation de portefeuille, puis nous aurons notre portfolio-article et ensuite nous aurons notre site-nav en bas. Voyons à quoi cela ressemble dans notre navigateur. Je vais recharger notre navigateur et nous pouvons voir que nous affichons toujours à peu près la façon dont nous nous attendions pour notre mise en page de bureau et que je le fais plus petit, vous pouvez voir qu'il passe autour et nous pouvons voir notre portefeuille est au sommet. Nous avons notre paysage, notre portrait, notre studio et nos liens commerciaux. Ensuite, maintenant, nous avons notre site-nav en bas. Je pense que ce texte est un peu petit pour un appareil mobile donc je vais corriger cela dès maintenant. Je vais changer notre taille de police à deux unités de la largeur de vision.Mettons cela dans notre requête média, retour à un là-bas et je pense que je veux que notre en-tête soit centré pour un mobile.Je pense que nous allons dire centre et ensuite nous allons aller pour notre bureau, nous avons toujours notre une, deux, trois colonnes. Nous avons un en-tête couvrant la première rangée et nous avons notre portfolio-nav et portfolio-article et le portfolio-nav étendant jusqu'au troisième , puis notre navigation sur notre site, puis nous avons dit que notre en-tête serait aligné vers la droite et nous aurons une taille de police plus petite. Mais en dehors des définitions de bureau. Nous avons une colonne, désolé, puis chaque élément assis dans sa propre rangée et nous avons tout centré . Voyons à quoi cela ressemble dans notre navigateur et maintenant je vais recharger cela et nous avons terminé. Nous avons un texte plus grand pour notre mise en page mobile maintenant, mais nous avons tout ce qui convient bien là et il n'a pas l'air trop squashy.Bien sûr, quand nous nous développons à nouveau, tout revient à la façon dont nous l'avons conçu à l'origine. C' est ainsi que nous pouvons implémenter une page Web de portefeuille en utilisant la grille CSS. 9. Résolution de l'introduction à la grille CSS: Eh bien, c'est la fin de notre introduction à la grille CSS. J' espère vraiment que vous l'avez apprécié et que vous l'avez trouvé utile aussi. Au cours de cette classe, nous avons appris ce qu'est CSS Grid, comment nous pouvons l'utiliser pour définir des lignes et des colonnes dans une mise en page Web, comment nous pouvons positionner le contenu à l'intérieur de nos lignes et colonnes et enfin, comment nous pouvons rendre notre mise en page parfaite sur les ordinateurs de bureau et mobiles périphériques. Maintenant, si vous ne l'avez pas déjà fait, ce serait le moment idéal pour poster votre projet dans la galerie de projets. C' est un excellent moyen d'obtenir des commentaires et aussi de montrer votre travail étonnant aux autres étudiants. Encore une fois, j'espère vraiment que vous avez trouvé ce cours utile et apprécié et j'ai hâte de vous voir la prochaine fois.