Les bases du CSS : commencer avec les grilles CSS

1. Introduction: Je suis devenu développeur web en 1996. J' ai donc grandi avec CSS. Je suis Rachel Andrew. Je suis développeur web, écrivain et conférencier et je vis à Bristol au Royaume-Uni. CSS Grid est une méthode de mise en page à deux dimensions. Il peut disposer les choses en lignes et en colonnes en même temps, et c'est la première fois que nous avons quelque chose comme ça dans CSS. Quand j'ai vu la spécification qui est devenue CSS Grid, je savais que c'était quelque chose dont nous avions besoin. Mon expérience m'a dit que si quelqu'un n'était pas un peu une pom-pom girl pour ça, ça pourrait disparaître. Alors j'ai décidé que je serais cette pom-pom girl et je commencerais à écrire et à parler de quelque chose qui n'était pas vraiment quelque chose que n'importe qui pourrait encore utiliser dans l'espoir de faire exciter tous les gens comme moi. Dans cette classe, je vais vous expliquer comment commencer avec CSS Grid et vous montrer quelques-unes des principales caractéristiques de la spécification par un moyen d'un petit projet. C' est une disposition de bloc de base qui me permet de vous montrer certaines des caractéristiques de la grille dans un type réaliste de cadre. Ce cours sera précieux pour tous ceux qui travaillent sur le web. Que vous fassiez principalement le développement frontal et que je veux que vous appreniez à propos de CSS Grid, ou même si vous faites principalement le développement back-end. Ce sera utile si vous en connaissez déjà un peu sur CSS. Vous savez comment appliquer CSS à une page et vous comprenez des choses comme les sélecteurs et ainsi de suite. Je suis vraiment excité que tu aies rejoint la classe. Alors commençons. 2. Présentation des grilles CSS: La principale façon de faire la mise en page avant CSS Grid était vraiment d'utiliser des flottants. Maintenant, pour flotter n'importe quel élément flottant, il va se déplacer vers le haut. Je suis sûr que vous pouvez flotter une chose et ensuite vous pouvez flotter une autre chose à côté de lui, et vous pouvez créer un système qui ressemble à une grille. Pour ce faire, vous devez tout obtenir d'une largeur. Chacun de vos éléments, vous lui donnez une largeur, puis vous les flottez l'un à côté de l'autre, et donc ce que vous finissez avec ressemble à une grille. n'y a pas de vraie grille sur la page, ce que vous avez là est juste un tas d'éléments tous poussés autour pour ressembler à une grille. Au fur et à mesure de cela, nous avons ensuite obtenu des livres Flex que beaucoup de gens ont salué comme un excellent moyen de créer des grilles sur le Web, mais ce n'est pas non plus un bon cadre. Il vous permet de créer des grilles plus facilement que les flotteurs, mais vous continuez à donner une largeur aux choses et à les pousser autour. Donc, c'est ce que nous ferions pour faire la mise en page jusqu'à ce que nous ayons CSS Grid. CSS Grid est une méthode de mise en page bidimensionnelle pour le web. Deux dimensions signifie que nous pouvons disposer les choses en colonnes mais aussi en rangées en même temps, et c'est la première fois que nous avons vraiment quelque chose comme ça pour le web. CSS Grid est maintenant disponible dans tous les navigateurs modernes. Il a un très bon support de navigateur. Si vous apprenez à devenir un développeur web aujourd'hui ou même si vous commencez un nouveau projet aujourd'hui, il y a vraiment de nombreuses raisons de ne pas utiliser Grid. Donc, c'est une chose à regarder pour être comprendre comment utiliser, parce que c'est beaucoup comment les choses vont être faites à l'avenir. Donc, cet environnement est CodePen, c'est un site de partage de code, vous pouvez le signer pour un compte gratuit. La bonne chose à propos de CodePen est que si vous trouvez quelque chose sur lequel vous aimeriez l'apparence et que vous souhaitez expérimenter, vous pouvez créer votre propre code de copie fork, et cela vous permet de jouer et de l'éditer et de faire choses à utiliser comme point de départ pour votre propre travail. Donc, la façon dont nous allons travailler c'est que j'ai créé un point de départ. Pour accéder à cet exemple, utilisez simplement le lien en bas de l'écran et vous trouverez également cette URL dans la description croisée. Donc c'est le site sur lequel nous allons travailler, mais j'ai supprimé toute la mise en page. Donc, nous avons quelques CSS ici mais nous n'avons pas le CSS qui crée la mise en page. Maintenant, si nous faisons défiler vers le bas, vous pouvez voir que nous avons toutes les images et tout le contenu. Ceci est disposé dans la mise en page de bloc, qui est que les choses ne souffleront pas l'autre, ce qui est la façon par défaut que les choses seront disposées en CSS si vous ne créez aucune mise en page. Donc, pendant que nous sommes dans CodePen, nous pouvons jeter un oeil sur le fonctionnement de CodePen. Maintenant, lorsque vous allez pour la première fois à l'exemple, vous allez voir quelque chose comme celui-ci, et si vous cliquez sur le bouton Fourche en haut, cela va créer votre propre copie. Donc, maintenant, vous pouvez travailler sur cette copie que vous avez enregistrée dans votre compte CodePen, sorte que vous pouvez y revenir plus tard, et cela signifie que vous pouvez apporter des modifications et suivre toutes les leçons sans changer le point de départ réel par défaut. Si les choses se gâtent et que vous voulez essayer à nouveau ou si vous voulez essayer quelque chose de complètement différent avec l'exemple, vous pouvez simplement créer une autre Fork et recommencer à zéro. Mais regardez les différents panneaux ici en haut. Ceci est le code HTML du document. Ainsi, vous pouvez voir tout le code HTML utilisé pour marquer le contenu. Voici le poteau en bas et il y a la barre latérale. Puis le bas ici, nous avons le CSS. C' est là que nous allons passer la majeure partie de notre temps dans cette leçon. Nous allons parcourir le CSS et ajouter des choses aux sélecteurs que nous avons déjà ici et apporter des modifications à cela. Si vous commencez à éditer le code de l'exemple original, CodePen créera essentiellement une Fork pour vous car vous ne pouvez pas changer le code de l'exemple de quelqu'un d'autre sans leur mot à dire. Donc, vous n'avez pas besoin de vous soucier de jamais gâcher le code de quelqu'un d'autre sur CodePen. Vous allez toujours créer votre propre version du document. Mais cela pourrait être très pratique si vous créez simplement des gens de vos propres trucs, car alors vous pouvez avoir plusieurs copies pendant que vous travaillez à travers les choses, puis revenir à l'ancienne version si vous le souhaitez quand vous avez un problème. CodePen essaie d'enregistrer automatiquement votre travail. En fait, parfois pendant que vous travaillez, vous pouvez voir un petit message en haut disant qu'il s'agit d'économiser automatiquement ou de demander que je sauve. Si vous voulez vous assurer que vous avez enregistré le point auquel vous vous trouvez, vous pouvez toujours cliquer sur le bouton Enregistrer en haut pour vous assurer que le travail que vous avez effectué a été enregistré. Si vous venez à CodePen pour la première fois, le panneau JavaScript ici est ouvert. Nous n'allons pas écrire de JavaScript aujourd'hui, vous pouvez toujours sortir cela du chemin en le minimisant et il disparaîtra. De même, si lorsque vous travaillez vraiment sur CSS, si vous voulez faire un peu plus d'espace, vous pouvez même minimiser le panneau HTML si vous le souhaitez, et simplement retirer cela de la façon si vous voulez obtenir un petit écran pour travailler sur, afin de maximiser l'espace que vous avez à travailler. Bien sûr, vous pouvez évidemment faire glisser ces panneaux autour pour faire un peu plus d'espace pour vous. Je vais passer en mode présentation dans CodePen parce que cela va me permettre de vous montrer le texte et le CSS un peu plus grand, ce qui sera plus facile pour vous de dire. Sinon, tout fonctionne de la même manière. Donc, avant de commencer à apprendre réellement sur le CSS, je vais juste vous montrer un peu autour de nos documents et comment les choses fonctionnent. Donc, en haut ici, nous avons le code HTML du document. Maintenant, la façon dont le CodePen fonctionne est que vous n'incluez pas les balises de corps, et voici les parties d'un document HTML que vous connaissez peut-être. Donc, nous commençons simplement par ce qui se trouve à l'intérieur du corps du document. Donc, nous avons ici notre en-tête qui inclut notre navigation. Vous pouvez voir la navigation ici. Ainsi, par exemple, nous avons des articles, et voici des articles dans le HTML. Ensuite, nous avons le titre qui est un H1, c'est un billet de blog, et c'est là que nous commençons le document principal. Donc, nous avons une image de l'emballage de classe, et qui a noté moins la classe de vedette, et c'est notre fonctionnalité Dyson. Alors, ils sont là. Ce sera le genre de billets de blog avec une image et un lien à cliquer. Donc, ici, cela en fait marqué comme une liste, parce que ce qu'est cet UL, c'est une liste non ordonnée, et ensuite nous avons des articles de liste, des articles saisonniers. Vous pouvez voir que nous avons des images là-dedans avec la balise image img. Donc, vous pouvez continuer à regarder à travers ces, et faire défiler vers le bas, et ici nous avons notre article avec une classe de post, et c'est l'article qui est ici. C' est donc le contenu principal de notre design. Le panneau inférieur ici est notre CSS. Ainsi, vous pouvez voir nos sélecteurs CSS tels que HTML. Ici, nous définissons une police pour tous les CSS va avoir la même police, Open Sans. On travaille, on a plein de choses dans le menu. Nous avons des choses comme les couleurs d'arrière-plan et ainsi de suite, choses qui font partie de la mise en page mais ajoutent un peu de style à ces documents afin que nous n'ayons pas à écrire absolument tout dans ces leçons. C' est donc notre CSS et surtout, nous allons travailler dans ce panneau, apporter des modifications ou ajouter de nouveaux sélecteurs et de nouvelles règles pour nos sélecteurs là-bas. La raison pour laquelle j'ai choisi un billet de blog est que je pensais que c'est une bonne chose, que beaucoup de gens ont un site personnel et si vous apprenez simplement à développer pour le web, créer un site personnel comme celui-ci, c'est un vraiment bon moyen de jouer et d'apprendre de nouvelles compétences. En fait, c'est souvent là que je commence avec quelque chose de nouveau. Je vais commencer sur mon site personnel, je vais jouer avec quelque chose de nouveau et voir comment cela fonctionne avant peut-être que je puisse l'utiliser sur un site de production pour un client. Vous pouvez vous sentir libre de prendre cela et de l'utiliser en remplaçant simplement les images et en faisant quelques changements si vous voulez utiliser sur votre propre site, ou simplement utiliser de petites parties de celui-ci comme un point de saut pour les choses que vous voulez ajouter à votre propres conceptions. Donc, de retour dans votre point de vue sur CodePen, si vous voulez prendre le travail que vous avez fait et ensuite l'appliquer à votre site Web, il y a un petit lien d'exportation ici, et donc, vous pouvez exporter cela comme il, et cela permettra vous téléchargez tout le HTML et CSS, afin qu'il puisse être téléchargé sur un serveur quelque part. J' utilise souvent CodePen comme un moyen de faire de petites expériences, que je vais ensuite prendre, j'utilise probablement ailleurs. Donc, vous pouvez toujours le faire, vous pouvez toujours saisir un zip du travail que vous avez fait. Maintenant que vous connaissez un peu CodePen et l'environnement dans lequel nous allons travailler, passons à la leçon suivante où je vais vous montrer comment définir votre grille. 3. Définir votre grille: Quand nous commencerons l'un de ces exemples, il y aura un ul à l'écran, qui est le point où la démo est maintenant si où je suis. Donc, pour cet exemple, nous commençons dès le début avec le code que je vous ai montré dans la dernière leçon. Maintenant, si vous voulez, vous pouvez simplement utiliser ce code et travailler à travers toutes les leçons en utilisant ce seul document, ou si vous le souhaitez, vous pouvez prendre un nouvel exemple, qui est mon point de départ pour chaque document, et nous allons vous montrer que ul sur l'écran avec chaque leçon. Dans cette leçon, je vais vous montrer comment définir une grille. Parce que pour commencer à utiliser GridLayout, nous devons dire au navigateur que nous voulons utiliser la grille CSS. Donc, je vais vous montrer comment définir une grille et utiliser des colonnes et lignes pour configurer la grille avec laquelle vous allez travailler sur la page. Donc, nous allons commencer à créer une grille sur cette page. Nous avons deux grilles différentes sur la page. Il va y avoir la grille qui contient les éléments en vedette en haut de la page, puis il y aura une deuxième grille pour traiter la mise en page de notre article en bas. Alors, commençons. Donc, la première chose que je veux faire est de travailler avec ces éléments en vedette. Donc, si nous faisons défiler vers le bas dans le CSS, vous trouverez .featured. Maintenant, c'est la classe qui a fourni à l'ul ici, nous avons la classe ul en vedette, qui va cibler ces éléments en vedette. Maintenant, pour le moment, ce que j'ai fait est que j'ai supprimé le style par défaut que vous obtenez sur une liste. J' ai enlevé la balle, la marge et le rembourrage. J' ai également ajouté une couleur d'arrière-plan, et nous verrons pourquoi lorsque nous commençons à créer notre grille. Donc, pour commencer à utiliser la grille, nous disons simplement au navigateur que nous voulons utiliser la grille, et nous le faisons avec la grille d'affichage. Cela signifie que maintenant nous utilisons GridLayout, bien que rien n'ait changé dans la mise en page, parce que ce que nous avons réellement créé maintenant, c'est que nous avons créé une grille de colonne unique, et donc cela n'a pas vraiment changé la mise en page. Donc, pour changer la mise en page lorsque vous commencez à ajouter des lignes ou des colonnes. Si vous voyez la fenêtre d'enregistrement automatique sur CodePen, cela signifie que CodePen a commencé à enregistrer votre document pour vous pendant que vous travaillez. Vous pouvez toujours cliquer sur Enregistrer en haut pour vous assurer que votre travail est enregistré. Donc, nous allons maintenant créer des colonnes sur la grille. Maintenant, nous le faisons avec une propriété appelée grid-template-columns. La valeur que prend grid-template-columns est appelée liste de pistes. C' est donc une liste des tailles de pistes. Maintenant, je vais arrêter en faisant cela en pixels parce que je veux vous montrer la différence entre les différentes façons de dimensionner nos colonnes. Donc, nous allons créer des pistes, et nous allons les créer à 300 pixels. Comme vous le voyez maintenant, le CodePen a mis à jour notre mise en page. C' est le gentil, pensez à utiliser CodePen. Nous n'avons pas besoin de recharger le navigateur pour enregistrer les modifications, il le fait pour nous. Vous pouvez voir que nous avons quelque chose qui ressemble un peu à une grille. Ce que nous avons, sont quatre pistes chaque décalage de 300 pixels, et nous allons commencer à mettre en page notre contenu dans ces pistes, et après que nous avons quatre éléments, ici affichés sur une rangée, ce qui crée juste une deuxième rangée et met cet article en bas de celui-ci. Donc, avec seulement deux lignes de CSS, nous sommes capables de créer quelque chose qui ressemble à une grille. Quelque chose d'autre que vous aimeriez faire ici est d'ajouter une lacune. J' ai cette couleur de fond sur la zone parce que ça veut dire que je peux laisser briller ça en ayant un écart. Donc, si je dis, Grid-PAP, dans ce cas, je vais juste faire un écart d'un pixel. Donc, il semble que nous avons une ligne entre nos articles. Cependant, vous pouvez utiliser n'importe quelle unité de longueur ici. Si vous vouliez un grand écart, vous pourriez dire, utilisez 10 pixels, et cela sépare les éléments. Donc, c'est la grande propriété de gap. Dans ce cas, posons-le à un pixel. On dirait qu'on a coupé la frontière entre les objets. Parce que CodePen met automatiquement à jour la mise en page pour nous, vous pouvez réellement voir comment la grille crée des pistes de colonne, essentiellement au fur et à mesure que nous tapons. Donc, pour nos besoins, nous voulons avoir ces quatre pistes. Mais vous pourriez évidemment avoir autant de pistes que vous le vouliez dans votre grille. Au fur et à mesure que nous allons, CodePen va juste mettre à jour cela, et changer la mise en page au fur et à mesure que vous allez. Donc, vous avez une grille sur votre page, mais vous pouvez vraiment voir la grille, il n'y a aucun moyen dans GridLayout de vous montrer toutes les bordures de la grille. Cependant, je travaille dans Firefox ici, et si vous allez utiliser GridLayout, je recommande vraiment de télécharger une copie du navigateur Web Firefox, parce que Firefox a excellents outils de développement qui le rendront beaucoup plus facile pour vous de travailler avec la grille. Bien sûr, vous pouvez travailler avec la grille CSS, et ne pas utiliser Firefox. Chrome a quelques outils de développement plus simples pour GridLayout, mais je trouve qu'il est vraiment utile de travailler avec les outils Firefox lorsque j'utilise la grille. Vous constaterez que différents navigateurs se sont concentrés sur différentes choses pour leurs outils de développement. Donc, Chrome est vraiment génial pour vérifier les performances de vos pages, et l' 've construit beaucoup d'outils de performance. Firefox se concentre sur la mise en page et les outils pour les concepteurs. Donc, avoir plusieurs navigateurs, n'est pas seulement utile pour les tests de navigateur, il peut en fait être utile pour le développement aussi. Nous allons ouvrir ces outils de développement tout au long du cours, car c'est un moyen très utile pour vous de voir ce qui se passe dans le navigateur lorsque vous travaillez avec GridLayout. Donc, nous pouvons jeter un coup d'oeil à ceux-là. J' ai cliqué droit sur une zone de ma grille et je vais dire, Inspecter l'élément. Cela ouvre ce panneau en bas du navigateur. Maintenant, c'est le panneau des outils de développement Firefox, et vous pouvez voir ici le html du document, et de l'autre côté, nous avons CSS. Donc, si nous allons à la mise en page, alors nous allons à la section grille ici, et c'est le ul.featured, donc c'est notre zone en vedette. Si je clique dessus, Firefox affiche les lignes de grille pour nous. Donc, c'est vraiment utile parce que nous pouvons voir toutes les différentes parties de notre grille et nous avons une petite représentation de votre grille, toujours vous pouvez passer le curseur sur n'importe quelle partie de la grille. Donc, cela vaut la peine à ce stade que vous passez par une partie de la terminologie que nous avons dans GridLayout. Chacune de ces zones est une cellule de grille, et vous pouvez penser que c'est un peu comme une cellule de tableau vraiment. C' est la plus petite zone que vous pouvez avoir sur la grille entre les lignes. Ensuite, nous avons des lignes de grille, et les lignes sont numérotées. Nous pouvons réellement activer dans Firefox les numéros de ligne. Donc, vous pouvez voir ici comment nos lignes sont connues. Nous avons quatre pistes sur notre grille, donc nous commençons par la ligne 1 sur la gauche, et nous passons à travers, donc la ligne 5, est la ligne de fin. Les pistes sont n'importe quelle zone de la grille ou n'importe quelle rangée de colonnes. Une ligne individuelle ou une colonne individuelle est appelée piste. Donc, nous avons une piste de colonne ici entre les lignes 1 et 2, puis nous avons une piste de ligne ici, entre ces lignes 1 et 2. Donc, quand je parle de pistes, c'est de ça que je parle. Je parle de n'importe quelle colonne ou ligne individuelle sur la grille entre deux lignes. Donc, passons à créer l'autre grille sur notre page. Je vais fermer ces outils pour l'instant. Donc, l'autre grille va traiter de la mise en page de notre article. Si nous faisons défiler le html vers le bas, nous pouvons voir que l'article est à l'intérieur rester avec une classe de contenu. Donc, c'est à cela que nous allons ajouter des règles CSS. Maintenant, je n'ai pas de contenu dans l'outil CSS. Donc, nous pouvons ajouter cela à un autre sélectionné.content. Donc, nous allons créer une grille, et juste faire une mise en page à ce sujet. Donc d'abord, je vais le pousser un peu vers le bas avec une marge supérieure. Donc, je suis juste en train d'ajouter une marge supérieure pour 40 pixels qui déplacerait cela un peu vers le bas. Encore une fois, nous allons créer une grille. Je vais à nouveau créer un pap de grille. Cette fois, je vais utiliser des pourcentages. Donc, nous allons créer un écart de grille de cinq pour cent. Ensuite, pour voir quoi que ce soit se passe sur notre grille, nous devons à nouveau utiliser des colonnes de modèle de grille, et nous allons utiliser des pourcentages. Donc, je vais créer une piste de colonne plus grande de 70 pour cent, puis une piste de colonne plus petite de 25 pour cent. Cela place notre barre latérale à côté de notre contenu. C' est aussi loin que nous allons obtenir avec ça dans cette leçon. Nous allons jeter un oeil dans la leçon suivante, sur la façon dont nous pouvons améliorer cette mise en page en utilisant certaines choses qui font partie de la grille. Avant de passer à cet exemple, je vais juste expliquer quelques choses sur la façon dont les choses sont disposées à ce stade. Donc, pour le moment, ce que nous avons, c'est que nous avons des grilles qui définissent ces contraintes externes de ces mises en page, mais nous n'avons pas encore commencé à changer ce qui se passe à l'intérieur des cellules de grille elles-mêmes. Donc, les images que nous avons ici sont un ensemble de photos de ballons, j'ai pris, « Je viens de Bristol, et nous avons une grande fête de ballons chaque année, ce qui me donne une grande bibliothèque de photos de ballons à utiliser. Mais vous pouvez évidemment échanger vos propres images, vous pouvez télécharger des ressources dans CodePen, ou vous pouvez créer un lien vers n'importe quelle image sur le web que vous souhaitez utiliser pour remplacer celles-ci. C' est juste un lien vers une image ici. Si vous vouliez télécharger des actifs dans CodePen, je vais juste passer à cette vue qui ressemble plus à la vue que vous voyez. Si vous cliquez sur ressources, vous obtenez un panneau d'actifs qui a plusieurs actifs de conception qui existent réellement dans CodePen que vous pouvez choisir d'utiliser. Vous pouvez également télécharger les vôtres, vous pouvez glisser-déposer des fichiers, puis vous avez un tas de fichiers que vous pouvez choisir parmi ceux que vous avez ajoutés, ce qui le rend plus facile. Si vous avez un tas de choses que vous voulez utiliser dans des exemples, vous pouvez simplement les saisir et les enregistrer ici. Mais vous pouvez également utiliser les choses que CodePen a fournies aussi. C' est maintenant la fin des bases de la définition d'une grille. Nous pouvons passer à la leçon suivante où nous pouvons vraiment commencer à affiner cette disposition en comprenant le dimensionnement des pistes. 4. Définir la dimension des lignes: Vous pouvez commencer cette leçon en utilisant l'exemple sur lequel vous travailliez dans la dernière leçon si vous les suivez l'une à l'autre, ou vous pouvez utiliser l'URL affichée à l'écran pour récupérer exactement où je suis maintenant. Dans la dernière leçon, nous avons créé une grille en utilisant des unités de longueur familières, donc des pixels et des pourcentages. Dans cette leçon, nous allons affiner la grille et utiliser une méthode de dimensionnement des pistes a été créée pour la mise en page de grille qui rend les choses beaucoup plus faciles. Donc, si vous regardez notre mise en page que nous avons créée maintenant, parce que nous avons ces quatre pistes qui sont 300 pixels, nous avons un peu cet écart à la fin. Maintenant, si nous voulons que vous créez une mise en page qui devait refléter, la façon dont nous ferions cela dans la grille complète est vous avez tendance à utiliser des pourcentages aussi bien si vous utilisez au bas ici. Donc, vous pouvez voir que parce que nous avons utilisé des pourcentages, ces pistes augmentent et diminuent. Le problème avec les pourcentages est que vous devez les trouver vous-même. Vous devez déterminer combien besoins de suivi en pourcentage, puis les augmenter et ensuite vous assurer que vous n'obtenez pas plus de 100 pour cent. Si vous obtenez plus de 100 pour cent, vous obtenez probablement une barre de défilement. Par conséquent, GridLayout a introduit un nouveau dimensionnement de piste. C' est utiliser quelque chose appelé l'unité FR, et c'est ce que nous allons commencer à jeter un coup d'oeil. L' unité FR est une unité flexible, elle définit une longueur flexible et traite de la distribution de l'espace dans le conteneur de grille. Dans la plupart des cas, si vous utilisez GridLayout, et que vous pensez vouloir utiliser des pourcentages, alors l'unité FR vous donnera résultats plus cohérents et vous évitera d'avoir à tout calculer. Par exemple, si vous souhaitez ajouter une piste supplémentaire, c'est facile avec l'unité FR. Avec des pourcentages, vous devez tout recalculer. Donc, dans la plupart des cas, je choisirais d'utiliser l'unité FR. La seule fois où je recommanderais d'utiliser des pourcentages est où vous utilisez GridLayout avec d'autres méthodes de mise en page qui doivent utiliser des pourcentages. Par exemple, vous avez une disposition d'amorçage flottante et que vous souhaitez placer un composant GridLayout au milieu de celui-ci, vous pouvez alors choisir d'utiliser des pourcentages pour correspondre au reste de votre mise en page. Mais la plupart, le reste du temps, j'irais pour l'unité des RF. Cela vous fera gagner beaucoup de temps. Il était vraiment difficile dans les méthodes de mise en page précédentes de mélanger des choses de taille fixe et choses flexibles lorsque nous utilisions des pourcentages et c'est quelque chose que l'unité FR fait vraiment bien pour nous. Donc, par exemple, vous pouvez avoir une petite icône que vous voulez toujours avoir 50 pixels de large, eh bien c'est bien parce que vous pouvez faire le reste du contenu un FR et il absorbera tout l' espace disponible laissant la chose de taille fixe sans provoquer alors une barre de défilement. Donc, si nous avons d'abord un coup d'oeil à nos articles en vedette ici. Si nous trouvons ceux dans le CSS et voici notre taille de piste de 300 pixels. Maintenant, je vais changer ces pistes pour utiliser cette nouvelle unité, l'unité FR, et je vais créer quatre pistes un FR. Vous pouvez voir la mise en page commencer à changer, sorte que devrait remplir la fenêtre du navigateur. La raison pour laquelle cela se produit, c'est que l'unité FR distribue l'espace disponible. Ainsi, grille a pris tout l'espace disponible dans notre conteneur de grille, qui s'étend sur toute la page. Parce que nous avons quatre pistes, toutes d'un FR, il a donné une partie à chacune des pistes. Si vous étirez et rétrécir la fenêtre de votre navigateur, vous pouvez voir comment c'est agréable et réactif, il grandit et se rétrécit en fonction de l'espace disponible que nous avons. Si vos pistes sont dimensionnées en pixels , elles sont essentiellement fixes. Donc, si nous finissons avec trop peu d'espace, eh bien, ça va juste déborder. Comme vous pouvez le voir, il s'agit de créer une barre de défilement et il est également sorti de la mise en page qui est ce qui se passerait si vous avez des pistes fixes. Juste ce genre de situation, que l'unité FR résout, ils nous permettent juste de partager les espaces disponibles, qu'il s'agisse d'une grande quantité d'espace ou d'une petite quantité d'espace. Donc, c'est la partie supérieure de la mise en page, maintenant il utilise beaucoup de l'espace disponible et les pistes sont agréables et flexibles. Donc, regardons notre zone de pourcentage, donc c'est le contenu ici, pour lequel nous avons utilisé des pourcentages. Maintenant, vous pouvez changer cela pour utiliser des unités FR aussi. Donc, je vais changer ça à trois FR, un FR. Maintenant, ce que cela fait, c' est qu'il dit que prendre tout l'espace dans le conteneur et donner trois parties de l'espace à la première piste, qui est notre piste qui est plus grande, et une partie à la deuxième piste. Donc, vous pouvez jouer avec ceci si vous aviez deux parties pour cette première piste et une partie pour la deuxième piste. Ce qui se passe ici, c'est que tout l'espace est divisé en trois et deux parties nous donne la première piste, et une partie, la deuxième piste. Donc, je pense que trois FR, un FR me donne le genre de mise en page que je veux. Donc, la réponse vaut la peine de savoir, ici nous avons un grand écart de cinq pour cent, vous pourriez le laisser ou vous pourriez décider d'avoir un écart de taille fixe. Ce qui se passe ici, c'est que la grille examine cet écart, et elle dit : « Eh bien, tout notre espace est disponible, nous devons enlever 40 pixels parce que cela est nécessaire pour combler l'écart. » Ensuite, tout ce qui reste est distribué en fonction de ces unités FR. Vous pouvez en fait mélanger des pistes de taille fixe et des pistes FR. Donc, si nous voulions toujours que notre barre latérale soit de 300 pixels, nous pourrions avoir une piste FR et une piste de 300 pixels. Ensuite, comme nous avons moins d'espace, vous pouvez voir que la piste de 300 pixels reste toujours dans les pixels, et c'est le reste de l'espace qui est donné à l'autre piste. Donc, ces unités FR sont vraiment utiles et nous aident à faire des mises en page qui grandissent et rétrécissent avec l'espace disponible sans que vous ayez besoin de faire les calculs. Donc, ce qui était le cas lorsque vous travailliez avec des pourcentages. L' unité FR est absolument indispensable pour tirer parti de la grille CSS. Nous n'avions pas besoin de le dire dans les méthodes de mise en page précédentes car cela n'aurait vraiment pas fonctionné. On n'avait pas l'espace pour distribuer. Donc, maintenant nous avons cela pour le réseau, utilisez-le et profitez de la puissance qu'il vous donne. Maintenant, vous êtes au courant de l'unité FR. Donc, la leçon suivante, nous allons commencer à placer des éléments sur la grille, et à imbriquer une grille dans une autre. 5. Les grilles imbriquées et le placement des objets: Si vous suivez le long, vous pouvez continuer avec l'exemple sur lequel vous avez travaillé, ou vous pouvez utiliser l'URL à l'écran pour trouver un exemple d'exactement où je suis maintenant. Dans la dernière leçon, vous avez appris sur le dimensionnement des voies, et nous avons commencé à rendre notre grille flexible. Dans cette leçon, nous allons très commencer à affiner la mise en page, et travailler sur certaines parties internes de la mise en page en imbriquant des grilles et en positionnant des éléments. Donc, nous allons maintenant jeter un oeil à l'intérieur de ces boîtes. Nous avons créé une grille sur le [inaudible] de cette zone, et la grille expose les éléments à l'intérieur. Mais, on ne dirait pas encore qu'on le veuille. Nous aimerions que cette légende superpose l'image, et nous voulons aussi obtenir les images, de sorte qu'elles soient toutes alignées et que toutes ressemblent à la même taille. C' est sur ça que nous allons travailler ici. Donc, ce qu'on va faire, c'est on va au nid une grille à l'intérieur d'une autre. C' est quelque chose qui est absolument bien à faire. Vous pouvez avoir autant de grilles imbriquées les unes dans les autres que vous le souhaitez. Maintenant, créons des mises en page plus complexes. Donc, notre grille principale est en vedette, et donc notre prochaine grille va être sur le li qui est à l'intérieur en vedette. Donc, comme avant, nous allons utiliser la grille d'affichage. Ensuite, nous allons commencer à créer, cette fois, des pistes de ligne sur la grille. Nous le faisons avec les lignes de modèle de grille, ce qui est tout comme les colonnes de modèle de grille. Je vais créer deux lignes. Donc, nous avons une ligne qui est un fr, et ensuite nous avons une ligne qui est 5em. Vous pouvez voir que quelque chose commence à se produire sans grille qui coder le panneau commence à redimensionner les pistes. Si vous n'avez pas rencontré l'unité em avant, c'est juste une autre unité de longueur en CSS. Cela correspond à la taille du texte, ce qui est très utile. Parce que cela signifie que si nous agrandissons notre texte, la piste réelle augmentera en taille. C' est un dimensionnement très utile, et nous allons jouer autour. Comme vous pouvez le voir, cette piste est un peu courte et coupée, mais nous allons jouer avec la façon dont nous créons ce dimensionnement au fur et à mesure de la construction de cette mise en page. Donc, nous avons maintenant une grille de piste à deux lignes à l'intérieur de chacune de ces tailles d'éléments. Donc, jetons un coup d'oeil dans l'élément bon inspection, parce que c'est une bonne façon de voir réellement comment cela fonctionne. Donc, vous pouvez voir que c'est notre grille principale, qui est celle sur en vedette. Mais, vous avez également ces grilles individuelles à l'intérieur des objets. Donc, nous pouvons activer l'un de ces, et vous pouvez voir sur cet élément, nous avons cette grille à deux pistes. Voici une piste, et voici la piste de deuxième rangée. Donc, c'est ce que nous allons travailler avec ce que vous allez positionner les éléments à l'aide de ces lignes de grille. Donc, aller travailler avec l'image, qui est ici. Nous avons un div pour la classe d'image. Ce que nous voulons faire, c'est étendre cela sur les deux rangées. Donc, nous allons utiliser la grille, et donc, nous commençons à la ligne 1, et nous finissons à la ligne 3, et cela va aller dans une colonne de grille. Donc, je veux en parler un peu vite. Ainsi, la ligne de grille est un raccourci pour le début de la ligne de grille et la fin de la rangée de grille. Donc, l'un est la première ligne. On commence à la ligne 1, et on finit à la ligne 3. Si nous mettons Firefox, ici, et faisons ça, nous commençons à la première ligne, et nous finissons à la troisième ligne. Donc, ce que la grille a fait, parce que nous n'avons pas positionné cette légende, il l' a effectivement poussé, a créé une nouvelle ligne sur la grille, et il a poussé cette légende là-bas, ce qui se passera par défaut. Grid ne chevauchera pas les choses, sauf si vous le demandez. Il créera toujours une nouvelle piste et mettra l'élément dans ce reste. Vous devez en fait demander à la grille de faire tout chevauchement du tout, sorte que vous ne finirez pas avec des choses empilées. C' est à peu près comme ça avec CSS. Nous essayons de ne pas empiler votre contenu ou cacher des choses derrière d'autres choses, sauf si vous avez demandé cela. Maintenant, nous avons seulement besoin de dire la première ligne démarrée pour les colonnes, parce que nous ne voulons couvrir qu'une seule piste, et c'est la valeur par défaut. Pensez à couvrir une piste par défaut. Donc, si nous disons commencer à la ligne de colonne 1, cela commencera à la ligne de colonne 1, et cela se terminera à la ligne de colonne deux, donc nous ne mettons pas réellement la ligne de fin explicite. Nous voulons également que l'image couvre toute la zone plutôt que d'avoir cet espace blanc en dessous. Maintenant, nous allons utiliser, pas une partie de la grille, c'est une partie différente de CSS, mais il y a un moyen de faire étirer une image et de couvrir toute une zone. C' est en utilisant une propriété appelée ajustement de l'objet. Donc, si nous ciblons l'image réelle elle-même, et je vais dire l'ajustement de l'objet, couverture, et la définir à la largeur et la hauteur de 100 pour cent, vous pouvez voir maintenant que notre image est mise à l'échelle et va dans la forme de la boîte, et il va ensuite se récolter en gros. Parce que sinon, vous finiriez avec l'image étirée hors de place, n' est pas ce que vous voulez. Maintenant, nous continuons à coiffer ça. Vous verrez comment cela fonctionne. Donc, nous avons réglé cela sur la couverture d'ajustement objet. Donc, maintenant nous pouvons traiter de la légende, que nous voulions tirer vers le haut et avoir superposé notre image. Donc, si on va à notre légende, et je vais mettre ça dans la grille 2. Vous voyez la grille doit maintenant être placée dans une autre piste de colonne, car elle ne veut pas la superposer. Donc, si vous voulez la superposer, nous devons également définir la colonne sur une. Maintenant, nous avons notre légende posée au-dessus de l'image, et j'ai utilisé ces couleurs RGBA ici, et RGBA signifie que nous pouvons définir le canal alpha de tous les arrière-plans. J' ai mis à 0,6, ce qui le rend semi-transparent, permet aux images de briller à travers. Je vais faire une dernière chose pour ranger ça et nous donner des images et une belle sorte de serrage fixe qui aidera à les garder en proportion l'un par rapport à l'autre. Donc, si nous revenons à notre grille d'origine, donc ceci est en vedette, qui est la grille principale ici, qui a obtenu les éléments. Je vais trouver des rangées. Par défaut, toutes les lignes sont de taille automatique, et vous pouvez penser à la taille automatique, ce qui signifie que les choses vont évoluer pour s'adapter au contenu qui se trouve à l'intérieur d'elles. Vous voudrez peut-être changer cela, et donc dans ce cas, je vais définir des lignes, et je vais les faire 250 pixels de hauteur. Cela commence alors à nous donner la mise en page que nous voulons. On a ces belles images bien rangées. Nous avons défini des hauteurs de ligne, et nous avons les légendes qui superposent les images elles-mêmes. Juste pour finir cette section, je veux vous montrer une autre petite fonctionnalité de la grille de mise en page. Donc, vous pouvez voir sur cette légende, nous avons du texte supplémentaire ici, qui est très proche du bas. Parce que nous les avons définis pour être 5em, ce qui est une longueur absolue. Ça ne va pas devenir plus grand que ça. Ce n'est pas comme l'unité fr, ou quelque chose qui répondrait à la taille du texte. Ce que je voudrais vraiment, c'est d'avoir quelque chose qui ira à de hauteur fixe. Mais si je mets plus de texte, j'aimerais qu'il s'agrandisse et qu'il fasse face à ce texte. Parce que, c'est la réalité de travailler sur le web, est que parfois plus de texte, obtenir voir. Nous pouvons voir ce qui se passe si je viens d'ajouter un peu plus de contenu. Il n'est pas idéal sur le web d'avoir du contenu qui est généralement une hauteur fixe, parce que nous n'avons pas tendance à connaître la taille du texte ou la quantité de texte qui va finir dans. Vous pouvez planifier soigneusement votre conception, puis il pénètre dans le système de gestion de contenu, et donc il met beaucoup plus de texte que vous ne l'attendiez. Donc, grille nous donne un moyen de faire face à ça. Pour produire une bonne ligne de modèle, vous avez ces valeurs 5em. Maintenant, ce que j'aimerais, c'est que, pour devenir un minimum, j'aimerais que ces morceaux aient au moins 5em de haut, même si nous n'avons pas assez de contenu. Par exemple, cette deuxième piste ici, qui vient d'avoir une ligne. Mais je voudrais, si j'ai trop de texte là-dedans, j'aimerais qu'il s'agrandisse, et c'est exactement ce que fait la fonction minmax. Donc, ce qui se passe ici, c'est lorsque vous utilisez minmax pour votre dimensionnement de piste, vous pouvez passer en une minute, un minimum qui dans notre cas est de 5em, puis utiliser une virgule, puis vous passez au maximum. Donc, pour le maximum ici, j'utilise auto, et auto signifie vraiment la taille du contenu dans ce contexte. Donc, cela signifie que si nous avons plus de texte là-dedans, la piste va grandir. S' il n'y a pas assez de texte, ce serait 5em. Ce qui fait également ressortir, c'est que notre grille interne n'a aucune relation avec la prochaine grille interne. Ce que vous pouvez faire pour le moment, vous dites : « Eh bien, j'aimerais que tout soit aligné avec l'élément le plus haut, car toutes les grilles imbriquées sont indépendantes de la grille extérieure. » Si vous réduisez la quantité d'espace dans une piste, vous pouvez voir comment cette légende s'agrandit réellement pour faire face au texte d'encapsulation. Donc, c'est une petite fonction qui reflète vraiment la façon dont les choses sont sur le web. Le fait que si vous avez quelque chose qui a une certaine quantité de contenu, il peut y avoir plus de contenu parfois. Donc, pour terminer cette section, nous avons maintenant stylisé les boîtes internes dans la section en vedette supérieure, et nous l'avons fait en imbriquant une grille à l'intérieur de la grille que nous avions déjà. En positionnant les éléments, vous commencez à utiliser le positionnement basé sur la ligne, dont nous parlerons un peu plus tard pour positionner les éléments et tirer la légende sur l'image que nous avons déjà placée. Donc, dans une vidéo, quelques propriétés CSS, vous avez beaucoup appris sur la grille CSS, et les différentes choses que vous pouvez faire avec. 6. La combinaison du placement manuel et automatique: Vous pouvez continuer à suivre avec l'exemple sur lequel vous travaillez, ou vous pouvez utiliser l'URL à l'écran pour récupérer exactement où je suis maintenant. Dans cette leçon, nous allons commencer à regarder un peu plus sur le moment où vous pourriez vouloir utiliser le placement automatique et la grille lorsque vous souhaitez positionner vos éléments et comment vous pouvez mélanger les deux méthodes de mise en page. Vous pouvez voir le placement automatique qui se passe déjà dans notre loquet. Donc, lorsque nous avons défini nos grilles sur les éléments en vedette, nous n'avons pas positionné chacun de ces éléments, ils en ont simplement un dans chaque cellule de la grille. Nous avons commencé à faire un peu de placement lorsque nous avons présenté les internes de ces articles. Parce que sur la grille imbriquée, nous avons défini une grille, puis nous utilisons le positionnement basé sur la ligne pour placer les éléments sur cette grille afin que nous puissions tirer cette légende sur l'image ci-dessous. Par conséquent, nous examinons comment nous pourrions utiliser la disposition positionnée que vous placez des éléments dans la grille lorsque nous présentons notre contenu ici. Ainsi, vous pouvez voir en ce moment que le contenu est poussé vers le haut à droite contre le bord de la fenêtre d'affichage. Il court sur les bords et ce n'est probablement pas quelque chose que vous voudriez. Donc, peut-être aimeriez-vous modifier cette liste de pistes. Donc, allez dans les colonnes de modèle et ajoutez un peu d'espace de chaque côté. Donc, peut-être que nous avons juste eu un écart de 10 pixels, et vous pouvez voir ce qui se passe. Le placement automatique essaie de placer tout notre contenu dans cette petite piste, et il est débordant parce qu'il ne rentre pas dans une piste de 10 pixels et semble un peu gâchis. Ce n'est évidemment pas quelque chose que nous voulons. Donc, nous allons devoir positionner le contenu qui ne finit pas dans cette petite piste. Je vais aussi ajouter quelques lignes ici. Parce qu'une fois que vous commencez à placer vos éléments, vous pouvez commencer à ajouter des lignes plutôt que de simplement laisser lignes être créées dans la grille afin que vous puissiez y placer des éléments. Donc, je vais ajouter une ligne en haut, puis une ligne automatique en dessous. Donc, nous avons maintenant créé un peu plus d'une grille spécifique, et nous pouvons commencer à y placer nos éléments. Donc, maintenant, nous avons mis en place notre grille et l'avons rendue un peu plus spécifique. Positionnons le contenu sur cette grille. Le contenu est en bas de notre HTML et il se trouve dans un article dans la classe de post. Donc, nous pouvons cibler post, puis nous allons utiliser la colonne de grille, et nous voulons commencer après la ligne de colonne deux. Donc, cela évitera cette petite piste maigre que nous avons créée. Nous avions seulement besoin de parcourir une piste, donc nous pouvons juste dire la deuxième colonne de grille. Je vais en fait le configurer pour s'étendre sur deux lignes, recréées sur des pistes de ligne. Donc, nous allons le faire couvrir de la ligne 1 à la ligne 3. Maintenant, parce que nous avons positionné cela par ligne et colonne, ce qui est arrivé au placement automatique est que, grand repositionnement de l'élément que vous avez placé, puis il prend l'élément suivant qu'il trouve, et les choses sont où est la première cellule vide ? Eh bien, la première cellule vide dans ce cas est dans cette petite piste maigre, où nous ne voulons pas que les choses aillent, et c'est pourquoi la barre latérale va et a sauté dans cette piste. Donc, nous devons également positionner la barre latérale. Donc, cela a une classe de côté un. Nous allons d'un côté veulent aller après la grande ligne de colonne 3. Je voudrais en fait qu'il apparaisse à une partie du contenu, ce qui signifie que nous pouvons le mettre dans une ligne de grille deux, qui le déplace ensuite vers le bas du contenu. C' est ce genre de chose qui était vraiment difficile à faire sans mise en page de la grille. En fait, créer des espaces blancs au-dessus des éléments était très, très difficile, et donc cela vous montre juste une de ces petites choses que vous pouvez faire avec mise en page de grille qui était autrefois très difficile et peut maintenant être utilisé de manière plus créative. Parce que nous avons nos quatre unités qui définissent nos pistes et disent que cette rangée grandit et se rétrécit vraiment bien avec l'espace disponible. Donc, dans la partie supérieure de cette page, nous allons utiliser le rythme automatique. Nous voulons autant d'articles que vous avez à entrer et à mettre en place eux-mêmes. Cependant, ce que nous aimerions, c'est, faire du premier élément une grande fonctionnalité, alors le rendre plus grand et couvrir réellement plus de cellules de la grille. Ainsi, nous pouvons le faire en ciblant le premier élément de cette liste. Donc, c'est le premier enfant de cette liste. Donc, ce serait l'essaim des ballons et dirigeables qui se dirigent. Le premier sélecteur enfant sélectionnera baser le premier enfant du conteneur. Donc, ici, nous disons, je veux le premier élément de liste à l'intérieur de la vedette qui obtiendra comme premier élément ici, et c'est l'élément que nous voulons étendre sur plus de cellules. Je veux que cet élément commence à la ligne de colonne un et à la ligne de colonne trois, et commence à la ligne 1 et à la fin de la ligne 3. Ce serait juste placer cela, fait qu'une grande image, puis les autres éléments continuent à utiliser le placement automatique. Donc, les grilles vont d'abord exposer tout notre article et le faire prendre toutes les cellules dont il a besoin, puis il va juste déposer les éléments à côté de lui. Ceci est un très bon exemple de la façon dont vous pouvez mélanger placement automatique d'éléments avec des éléments de positionnement. Si vous avez quelque chose que vous voulez avoir à un endroit spécifique d'une page, vous pouvez le positionner, puis laisser la grille placer tous les autres éléments pour vous. Donc, vous pouvez imaginer que si vous essayez de mettre en surbrillance une image spécifique ou une grande section de contenu, c'est quelque chose que vous pouvez faire pour créer ces blocs halo en haut d'une page, où vous mettez en évidence quelque chose de spécifique dans la conception en le faisant couvrir la plupart des pistes de la grille. Vous pouvez voir comment, nous avons toujours quatre pistes sur la grille à ce stade. Donc, si nous réduisons nos fenêtres, cela prend autant d'espace que pour ces deux pistes, et nous pouvons les agrandir. Donc, il est naturellement flexible sur toute la grille. Si nous avons moins d'espace ou si nous avons plus d'espace, parce que nous utilisons ces unités FR, l'espace est juste partagé proportionnellement. Ainsi, une grande image prend toujours deux pistes de la grille même si ces camions sont plus petits ou plus grands, ce qui la rend naturellement flexible. Donc, la très petite quantité de CSS, nous n'avons pas écrit une énorme quantité de CSS. Vous avez la disposition de base ici pour votre blog. Nous avons combiné les notes en les imbriquant, nous avons utilisé le positionnement et nous avons également utilisé le placement automatique. Nous avons appris les différentes façons de dimensionner les pistes en utilisant les unités FR et aussi en utilisant des unités de plomb, et les choses que le minmax mouvement, vous savez comment créer quelque chose qui commence à une taille fixe mais se développe à contiennent du contenu. Ce que nous avons ici est vraiment la mise en page de votre bureau pour votre blog. Je vais l'étaler. Il est flexible, il n'est pas encore tout à fait réactif. Et donc, dans la prochaine leçon, nous allons jeter un oeil sur la façon de prendre cette mise en page et de la rendre vraiment bien à de très petites tailles d'écran. 7. L'intégration de l'aspect adaptatif: Vous pouvez suivre l'exemple sur lequel nous avons travaillé. Si vous voulez commencer par le point auquel je suis maintenant, utilisez l'URL qui est à l'écran. Dans la dernière leçon, nous avons abordé le placement manu par rapport au placement automatique, et nous avons montré comment nous avions cette mise en page flexible, mais elle n'était pas encore tout à fait réactive. Donc, dans cette leçon, nous allons envisager de créer une mise en page réactive qui nous aidera à créer une version qui a vraiment fonctionné, vraiment bien sur les petits écrans. Un design réactif répondra à n'importe quel appareil que vous utilisez. Sur le Web aujourd'hui, les gens utilisent de minuscules téléphones avec de très petits écrans, ils utilisent des tablettes, ils utilisent des ordinateurs de bureau avec des écrans énormes. Donc, nous créons un design réactif signifie qu'il fonctionnera également bien sur chacun de ces écrans à différentes mises en page, afin que nous puissions modifier la mise en page pour profiter de la taille de l'écran que nous avons. Je vais vous montrer comment enlever un billet de blog flexible, et le transformer en un design réactif avec une petite disposition d'écran. La mise en page que nous avons créée est flexible. Ainsi, comme nous avons moins d'espace ou plus d'espace, la répartition des espaces entre nos pistes en raison de l'utilisation de l'unité FR. Cependant, une fois que nous arrivons à très petit, il devient un peu difficile à lire. Vous ne voudriez pas vraiment lire quelque chose comme ça sur un téléphone portable, ce n'est pas idéal. Donc, maintenant, nous allons regarder comment en faire une mise en page réactive, pour créer une mise en page différente pour ces petits appareils d'écran. Ainsi, vous pouvez faire quelques choses avec la mise en page de la grille. Vous pouvez redéfinir votre grille, et vous pouvez redéfinir où les choses se trouvent réellement sur cette grille une fois que vous y avez apporté des modifications. Alors, jetons un coup d'oeil. Ce que je vais faire, c'est ajouter une requête multimédia. Ce que je dis ici, c'est que je vais utiliser une minwidth donc, quand les choses atteignent une largeur minimale, un 50 em, c'est là que je vais ajouter un point d'arrêt. Maintenant, quand vous ajoutez ces points d'arrêt, ne pensez pas trop à certains appareils, ne pensez pas bien, quelle est la taille d'un iPad ? Ou quelle est la taille d'un téléphone ? inquiétez quand votre design casse, vous inquiétez quand les lignes deviennent trop courtes ou trop longues, et c'est vraiment là que vous devriez ajouter ces points d'arrêt. Donc, ne vous inquiétez pas trop de la taille des appareils car il y a vraiment tellement d'appareils différents. Ça ne vaut pas trop la peine de s'inquiéter à ce sujet. Pensez simplement à votre design, quand est-il trop étroit ou trop large. Dans ce cas, je vais aller pour 50 em, et c'est là que parce que nous disons largeur minimale, c'est ce que nous voulons en fait une mise en page plus large, une mise en page de bureau qui est ce que nous avons déjà créé, nous voulons que cela démarre . Donc, nous avons affaire à ce panneau en vedette en haut. Ce que je vais faire, c'est que je vais prendre les colonnes et les rangées et les déposer ici. Maintenant, ce que cela signifie, c'est que je peux maintenant redéfinir la grille ci-dessus pour nos écrans plus petits. Ce que je veux faire pour les petits écrans, c'est que je n'aurai que deux pistes de colonnes. Donc, je vais déplacer deux pistes de colonne, et je vais changer les lignes de modèle de grille et je vais utiliser une propriété différente, une que nous n'avons pas vu auparavant, et c'est des lignes automatiques de grille. Nous allons utiliser minmax ici, et dire, grille automatique lignes 250 pixels, auto. Maintenant, ce que les lignes automatiques de la grille fait est lorsque nous obtenons des lignes dans notre grille qui sont automatiquement créées pour mettre du contenu dans, cela les créera à cette taille. Il y aura un minimum de 250 pixels de hauteur et un maximum d'auto. Maintenant, rien n'a encore changé, mais passons plus petit, et vous pouvez voir le changement de mise en page. Une fois que nous arrivons à ce 50 em, une fois que nous obtenons moins de 50 em, nous allons à notre plus petite disposition d'écran pour ce panneau parce que nous n'avons que deux pistes, des grilles placent notre gros objet en haut, et les petits objets ci-dessous. C' est un peu une mise en page plus agréable pour nos petits appareils, et alors que nous grandissons, nous arrivons aux 50 ems, et nous ramassons à notre disposition originale pour le panneau en vedette. Donc, ce que nous faisons ici est parfois appelé la première mise en page immobile qui configure fondamentalement ce que vous avez pour votre petit écran, puis vous le redéfinissez pour les écrans plus grands. Donc, nous avons deux colonnes pour un petit écran, et ensuite nous disons que quand nous aurons une largeur minimale de 50 em, nous aurons alors quatre colonnes. En utilisant à nouveau la propriété de colonnes de modèle de grille, nous écrasons l'instruction précédente une fois que nous obtenons suffisamment large pour avoir quatre colonnes, et c'est ainsi que CSS fonctionne. Les choses qui viennent plus tard dans la feuille de style écraseront les choses qui viennent plus tôt. Donc, vous avez d'abord votre matériel mobile, puis vous l'écrasez avec votre requête immédiate et passez à une disposition de colonne complète. Donc, en ce moment, nous utilisons notre disposition à deux colonnes et vous pouvez le voir parce que notre grand élément qui s' étend sur deux pistes couvre deux pistes en haut et les autres éléments viennent en dessous. Quand nous arrivons à 50 em, vous pouvez voir qu'ils reviennent à notre disposition de bureau. Donc, nous pouvons faire le même genre de chose avec le bas de la mise en page. Comme nous allons très petits, nous finissons avec pas beaucoup de place pour la barre latérale pour s'asseoir ici, et tout devient un peu étroit. Ainsi, nous pouvons apporter à nouveau des modifications au fonctionnement de cette mise en page. Donc, une fois de plus, nous allons ajouter notre requête média. Je vais utiliser le même point d'arrêt. Cette fois, nous allons faire le même genre de chose avec le contenu. Je vais saisir mes colonnes et mes lignes et les insérer dans la requête multimédia, puis nous pouvons redéfinir la grille ci-dessus. Donc, ce que je veux faire essentiellement est juste d'avoir une grande colonne centrale, et nous n'avons pas besoin de nous inquiéter des lignes ici, nous pouvons simplement ajouter cela dans. Ensuite, ce que je dois aussi faire est de prendre le positionnement et apparaître cela dans les requêtes média aussi afin que cela ait du sens une fois que nous avons une mise en page plus large avec les pistes que nous voulons. Donc, maintenant vous pouvez voir que les petits écrans, cela est revenu à essayer de bourrer notre contenu à l'intérieur de cette piste maigre. Donc, ce que nous devons faire est de faire commencer notre os latéral ou notre contenu après cette piste maigre. Donc, ils se retrouvent avec une classe de poste et celle de côté un qui représente le corps principal réel de notre article et la barre latérale, maintenant les deux commencent après la ligne de colonne de grille deux. Donc, c'est la ligne après demander n'importe quelle barre latérale là. Vous pouvez voir si nous faisons défiler vers le bas, c'est la barre latérale. Vous pouvez toujours mettre une couleur d'arrière-plan ou faire quelque chose pour la différencier si vous le souhaitez. C' est vraiment ce que vous avez tendance à faire avec les mises en page mobiles, vous devez empiler les choses dans un ordre utile, et c'est là que la grille le rend assez facile. Ensuite, si nous allons plus large, une fois que nous avons atteint ce 50 em, vous voyez la barre latérale apparaître en place parce qu'une fois de plus, nous avons écrasé les instructions pour être juste après la ligne de colonne de grille deux et l'ajouter dans une rangée, puis la ligne de colonne de grille trois pour la barre latérale. Donc, nous le configurons pour mobile, puis ci-dessous, à l'intérieur des requêtes moyennes, nous le configurons pour le bureau. Donc, nous avons maintenant créé une mise en page réactive simple. Donc, vous pouvez voir ici comment, mesure que nous allons plus petits, nous obtenons maintenant une belle mise en page mobile, et nous pouvons faire défiler vers le bas et tout est parfaitement lisible. Ensuite, au fur et à mesure que nous nous étirons, nous revenons à notre vue de bureau. La chose est avec la grille vraiment vous avez besoin de très peu de CSS pour y parvenir, et nous venons d'ajouter dans un point d'arrêt. Maintenant, dans une conception complexe, vous pouvez ajouter plusieurs points d'arrêt. Vous voudrez peut-être créer une mise en page qui profite de très grands écrans, et l'ajouter un autre point d'arrêt ou vous pourriez vouloir créer dire ce très linéaire, très minuscules téléphones. Parce que vous n'avez pas besoin de beaucoup de CSS pour le faire et ce n'est pas très difficile à faire, il est beaucoup plus facile d'adapter votre design à tous les différents types d'appareils qui sont là-bas. Donc, nous avons à peu près terminé avec l'utilisation de la grille pour mettre en page notre page, et vous pouvez voir comment à partir de quelques lignes de code, nous avons dû passer de quelque chose que nous venons d'avoir tout notre contenu présenté une chose en dessous de l' autre à une mise en page que vous pourriez mettre en ligne pour un billet de blog, et nous avons également fait cela réactif. Donc, vous avez une mise en page qui fonctionne pour différents appareils. Donc, nous allons passer à la leçon suivante juste pour réfléchir un peu à façon dont la grille fonctionne avec d'autres méthodes de mise en page. 8. La combinaison des mises en page: Nous voulons la dernière partie de notre mise en page et vous pouvez suivre avec la couche que vous avez construit jusqu'à présent, ou vous pouvez utiliser l'URL à l'écran maintenant pour récupérer exactement où je suis. Dans cette dernière leçon, je vais parler d'un endroit où vous ne voudrez peut-être pas du tout utiliser Grid et comment nous pouvons utiliser Flexbox afin de style sur la navigation. Ma navigation, je voudrais disposer en une rangée, ce qui en fait un bon candidat pour une mise en page Flexbox. Alors, jetons un oeil. Donc, dans le HTML, nous pouvons voir la navigation dans une liste ordonnée, comme nous avons Articles, Événements, Ressources et Me Contacter. Ajout du CSS. C' est la liste non ordonnée ici, celle à l'intérieur de l'en-tête. Une fois agai, n j'ai retiré la marge et le remplissage et le style de liste que vous obtiendrez par défaut sur une liste. Maintenant, pour en faire une mise en page Flex, tout ce que je dois faire, c'est dire, « display : flex ». Immédiatement, ils sautent tous dans une ligne et c'est parce que l'affichage par défaut pour Flexbox, la valeur de la zone de liste est d'avoir la direction flexible des lignes, donc les choses alignées dans une rangée. C' est vraiment tout ce qu'on a à faire. Par comparaison, si vous deviez en faire une mise en page Grid, vous devriez commencer à prendre beaucoup plus de décisions concernant la mise en page. Donc, nous disions « display : Grid » alors, eh bien rien ne se passerait, et nous devrions penser à mettre en place nos colonnes. Donc peut-être, nous pourrions avoir quatre colonnes. Maintenant, cela pourrait bien fonctionner si vous saviez que vous avez toujours quatre éléments dans votre navigation. Vous vouliez qu'ils soient espacés uniformément ou peut-être que vous ayez une navigation à plusieurs niveaux. Vous avez deux rangées de contenu. Eh bien dans ce cas, utiliser Grid serait un bon choix. Mais dans notre cas, nous voulons juste que ces articles s'alignent l'un à côté de l'autre. Donc, c'est beaucoup plus simple juste de dire, « display : flex » et cela me donne la mise en page que je veux vraiment. Donc, vous choisissez Flexbox si vous voulez simplement disposer les choses dans une dimension, c'est comme une ligne ou une colonne. Dans ce cas, nous les voulions comme une rangée, et donc Flexbox est un bon choix. Avec notre article de blog en vedette, c'est bidimensionnel parce que nous voulons disposer les choses en lignes et en colonnes. Nous voulons qu'ils s'alignent dans leurs colonnes ainsi que dans leurs rangées. C' est une mise en page bidimensionnelle. C' est pourquoi j'ai choisi Grid. Donc, c'est à peu près la raison pour laquelle vous choisiriez l'un ou l'autre. Avec Grid, vous pouvez définir toute la grille sur le parent, puis les éléments s'y intègrent, ce qui est une bonne façon de travailler. Donc, c'est vraiment une autre façon de choisir Grid, c'est quand vous voulez faire ce genre de grande configuration, former les éléments parents, puis laisser les choses tomber avec le placement automatique. Flexbox, c'est tout simplement prendre un tas de choses et les étaler. Donc, c'est vraiment toutes les étapes dont vous avez besoin pour créer une page de liste de blog. N' ayez pas peur de l'utiliser comme point de départ et d' créatif, d'apporter des modifications et de voir comment Grid se comporte. La meilleure façon d'apprendre CSS est de jouer avec CSS, absolument. Rappelez-vous, si vous avez fait beaucoup de changements et que vous voulez l'exporter et l'utiliser sur votre propre site, dans votre vue dans CodePen, vous avez ce petit bouton d'exportation. Si vous cliquez dessus, vous pouvez exporter un zip et cela vous donnera tout. Il vous donnera le CSS et le HTML. Donc, vous pouvez ensuite l'utiliser ailleurs ou l'ouvrir dans un éditeur de code sur votre bureau et y jouer. Donc, j'espère que cela a été vraiment utile pour apprendre à créer un billet de blog. Vous avez beaucoup appris sur CSS Grid en cours de route. 9. Réflexions finales: Donc, dans cette classe, vous êtes passé de ne rien savoir sur la grille CSS à être capable d' utiliser plusieurs des propriétés de la grille CSS pour mettre en page page Web naturelle. Vous pourriez utiliser ces trucs sur une vraie page Web en production en ce moment. Vous avez appris à définir une grille, à configurer des pistes de colonne et de route et à utiliser l'unité FO et des choses comme minmax, sorte que vous pouvez spécifier une taille minimale et une taille maximale. Nous avons étudié les grilles d'imbrication et également la création d'un design réactif simple. Nous avons également vu pourquoi vous pouvez utiliser grid sur d'autres méthodes de mise en page. Donc, vous êtes vraiment prêt à commencer à utiliser ce truc dans le monde réel. J' aimerais voir vos pages de liste de blog ou tout ce que vous faites est le saut de ce projet. Donc, veuillez les télécharger dans la galerie de projet, afin que nous puissions tous jeter un oeil. J' espère que nous apprécierons ce cours. Il y a tellement de directions différentes que vous pouvez prendre ces choses, que ce soit d'une manière créative, ou simplement dans une rationalisation de la façon dont vous créez des choses que vous avez déjà besoin de faire. J' ai vraiment hâte de voir ce que tu en fais. 10. Découvrez d'autres cours sur Skillshare: