Apprendre la grille CSS par exemple

1. Introduction du cours: [MUSIQUE] Bonjour, là. Encore une fois, bienvenue. Je suis Daniel et je travaille avec le Mellow One depuis plus de 15 ans. Voici mon cours sur l'apprentissage de CSS Grid par exemple. CSS Grid à côté de la boîte de peste a simplifié la dernière façon dont nous générons la mise en page. L'objectif de ce cours est de vous donner les connaissances nécessaires pour utiliser CSS Grid dans vos pages Web et interfaces. Je vais le faire en construisant quelques exemples. Nous allons commencer. Nous avons des choses simples comme comment configurer une grille de base, comment définir ses éléments ou comment placer des éléments à l'intérieur des ensembles. Après cela, nous passerons progressivement à différentes manières de rendre nos grilles réactives, comment combiner la grille CSS avec d'autres gestionnaires de mise en page tels que Flexbox et Mode. Nous ferons beaucoup de codage dans les scores et chaque leçon a ses fichiers d'exercices et ses solutions à tout le code. J'ai hâte de vous voir lors de la prochaine leçon où nous commencerons à bâtir sur le projet CSS Grid. [MUSIQUE] 2. Exemple 1 - Introduction du projet: Bonjour et bienvenue. C'est ce que nous allons construire dans ce premier exemple de cours CSS Grid. abord, nous verrons comment configurer une grille de base, comment elle fonctionne, comment définir les lignes et les colonnes et comment définir les tailles. En parlant de tailles, nous verrons une fonctionnalité vraiment intéressante de CSS Grid appelée minmax qui nous permettra de créer mises en page réactives sans utiliser de requêtes multimédias. Oui, vous avez bien entendu. Cette disposition change en fonction des dimensions de la fenêtre d'affichage, mais elle n'utilise aucune requête multimédia. De plus, nous verrons comment positionner manuellement des éléments dans des cellules ou comment les faire s' étendre sur plusieurs cellules. Voyons ce que nous avons dans les fichiers de départ pour cet exemple. Chaque leçon possède son propre dossier contenant un fichier de départ sur lequel vous pouvez travailler et le fichier final que vous pouvez vérifier à la fin de chaque épisode. C'est à ce point que nous allons commencer. À partir de la leçon 1, commencez ce code HTML. La structure HTML est assez simple. Nous avons un grand conteneur appelé items-grid, et à l'intérieur de ce conteneur, nous avons quelques divs avec une classe d' article et h4 plus une image. Il y a aussi des CSS de base, juste la couleur d'arrière-plan, des bordures et une hauteur maximale pour l'image. Les images proviennent de ce dossier GOT appelé maisons, et vous pouvez voir ici chaque image utilisée dans l'exemple. Le CSS et le HTML sont tous deux dans le même fichier. Mais gardez à l'esprit que ce n'est qu'à des fins éducatives. Ne faites pas cela dans un vrai projet. Commençons par voir comment passer d' une mise en page structurée comme celle-ci à cette jolie grille que nous avons ici. 3. Exemple 1 - Configuration de la grille de base: Faisons de ce conteneur une grille CSS. Pour cela, je vais entrer dans sa classe CSS correspondante, dans ce cas, la grille d'éléments, et je dirai ici la grille d'affichage. Si nous économisons et que nous allons nous rafraîchir, nous verrons que rien ne se passe pour l'instant. C'est parce que nous n'avons pas encore défini les colonnes ou les lignes de notre grille. Pour définir les colonnes, nous utiliserons une nouvelle propriété appelée grid-template-columns. Disons qu'au départ, nous voulons définir nos cartes sur deux colonnes, chacune de 200 pixels, je vais définir une valeur de 200 pixels pour la première colonne, puis une autre valeur de 200 pixels pour la deuxième colonne. Si je veux enregistrer et que je vais me rafraîchir, vous verrez maintenant que toutes les cartes sont affichées dans ce beau format avec deux colonnes, chacune de 200 pixels. Nous pouvons en venir à un autre, disons juste pour l' exemple, et ici j'ajouterai un de plus de 200 pixels et nous verrons maintenant que toutes nos cartes sont réarrangées dans cette disposition avec trois colonnes. Il est intéressant de noter que nous n'avons pas défini le nombre de lignes. Nous n'avons rien défini sur le nombre de lignes. Il s'agit principalement d'un modèle courant car nous définissons principalement le nombre de colonnes et le navigateur saura organiser automatiquement le contenu en fonction de ce nombre de colonnes. En gros, nous avions au total 10 cartes et elles sont organisées automatiquement dans une disposition à trois colonnes avec quatre rangées, les trois premières rangées contiennent trois éléments et la dernière n' a qu'un seul élément. 4. Exemple 1 - L'unité FR: Nous ne sommes pas confinés dans cette ligne à utiliser uniquement des pixels. Nous pouvons utiliser n'importe quelle unité de mesure CSS. Nous pouvons utiliser des pourcentages, nous pouvons utiliser des rems, nous pouvons utiliser des unités de fenêtre, nous pouvons utiliser n'importe quoi. Par exemple, je peux venir ici et sélectionner tous ces éléments et dire que d'accord, je veux que chaque colonne soit de trois rems. Si je me rafraîchis, nous verrons maintenant que nous avons cette mise en page foirée. Mais l'idée est que nous pouvons y ajouter n'importe quel type d'unités que nous voulons. Mais nous voudrons que toute notre mise en page s'agrandisse autant que possible dans cet espace libre. Une idée à laquelle nous pouvons penser est peut-être d'utiliser des pourcentages. Essayons peut-être de faire de 33 % tout ici et de voir comment ça se passe. Les choses semblent beaucoup plus organisées en ce moment. Mais quand même, si nous y regardons de plus près, nous verrons que l' espace ici n'est pas de la même largeur que l'espace ici. C'est surtout parce que si nous ajoutons tout ici, donc 33 % plus 33  % plus 33 %, nous obtiendrons 99 %, donc nous aurons encore un pour cent gratuit ici. Nous pouvons revenir ici, utiliser quelque chose comme ça pour couvrir tout cet espace. Mais la grille CSS est également livrée avec une nouvelle unité de mesure, et cette unité s'appelle la fraction, la fr. Si vous prenez tout ici et que nous le remplacerons par un fr et que nous allons le rafraîchir, nous verrons maintenant que nous avons exactement le même espace d' un côté ou de l'autre. fonctionnement de cette unité séparée, c'est que le navigateur prend tout l'espace disponible. Ensuite, il divise cet espace en nombre total d' unités fr nécessaires. Dans ce cas, le nombre total d'unités fr est de trois, 1 plus 1 plus 1. Chacune des colonnes occupera exactement un tiers de l'espace disponible. Maintenant, par exemple, si nous prenons la colonne centrale, nous allons en faire trois unités fr et nous allons nous rafraîchir, nous verrons une mise en page qui ressemble à ceci. Ce qui se passe ici, c'est que le nombre total d'unités fr est de cinq, 1 plus 3 plus 1. Le navigateur a pris tout l'espace disponible et le divise en cinq unités. La première et la dernière colonne seront placées sur un fr, soit 20 % de l'espace. Pendant ce temps, la colonne centrale ira sur trois fr, dans ce cas, 60 pour cent de l'espace. 5. Exemple 1 - Example: Si vous regardez notre mise en page en ce moment, il n'y a pas d'espace entre les cellules de la grille. Il y aura des cas où vous voudrez pouvoir contrôler l' espace entre les colonnes, donc l'espace entre les lignes. Pour ce faire, nous pouvons utiliser plusieurs propriétés. Le premier sera l'écart entre les lignes de la grille. En l'utilisant, nous pouvons définir l' espace entre les lignes. Je dirai que je veux avoir un espace de 50 pixels entre les rangées. Nous pouvons également utiliser l'écart entre les colonnes de la grille. Comme vous pouvez l'imaginer, cette propriété, nous contrôlons l'espace entre les colonnes. Si je veux enregistrer puis actualiser, nous pouvons voir maintenant que nous avons l'espace de 50 pixels entre les lignes et l' espace de 10 pixels entre les colonnes. Il existe également un raccourci pour les espaces entre les lignes et les colonnes. Au lieu d'utiliser deux propriétés différentes, je peux supprimer cela et dire que je veux utiliser une grille. Au départ, nous pouvons définir l'espace entre les lignes, 50 pixels comme avant et 10 pixels pour les colonnes. Maintenant, si nous sauvegardons, nous verrons que la sortie est exactement la même. La seule différence est que nous n'avons utilisé qu'une propriété au lieu de deux propriétés différentes. Enfin, si nous voulons que cet espace entre les colonnes et entre les lignes soit égal, nous pouvons simplement lui donner une valeur de 10 pixels. Chaque fois que nous nous actualisons, nous verrons qu'il existe maintenant une différence constante de 10 pixels entre les lignes et les colonnes de la grille. C'est ainsi que vous définissez l'écart entre les cellules à l'intérieur de notre grille CSS. 6. Exemple 1 - Fonction répétitive: instant, notre mise en page ne comporte que trois colonnes. Mais dans le monde réel, vous pouvez rencontrer des situations où vous aurez besoin quelque chose comme 12 colonnes ou même plus. Faisons en sorte que notre mise en page s' intègre en cinq colonnes. Au départ, celle-ci semble assez simple. Je vais juste ajouter ici deux autres colonnes de 1fr, et si nous actualisons, vous verrez que tout semble comme prévu. Mais un inconvénient est que cette ligne a commencé à devenir un peu plus difficile à lire. Nous devons compter tout le temps le nombre de fichiers qu'il y a à nouveau. Donc, pour des situations comme celle-ci, au lieu d'écrire plusieurs frs ou plusieurs colonnes, ce que je peux faire est de revenir prendre ces colonnes de modèle de grille et de dire que je veux répéter cinq fois. et un P. Cette ligne est exactement la même que celle-ci. Mais si vous les regardez, la seconde est un peu plus facile à lire. Si je supprime celui-ci et que je vais le rafraîchir, nous verrons que la mise en page est exactement la même, mais nous avons une ligne un peu plus facile à lire. La fonction de répétition a également un truc cool. Nous pouvons lui donner des modèles plutôt que des valeurs simples. Ce que je veux dire par là, disons que nous voulons tout le temps avoir une colonne qui est 2fr et après cela, suivie d'une autre colonne qui n'est que 1fr, et après cela, ils le répètent. modèle de plus. Ce que nous pouvons faire ici, c'est de venir dire que regardez, la première colonne doit être de 2frs et après cela, la colonne suivante doit être de 1fr et répéter ce schéma, 2 fois. Si je veux enregistrer et rafraîchir, nous verrons que nous avons obtenu cette grille, la première colonne de 2fr après celle de 1fr, après celle de 2fr, et la dernière est 1fr. Fondamentalement, il a répété ce schéma deux fois. Nous pouvons également lui donner des schémas si nous voulons l'avoir comme ça dans notre code. [CONTEXTE] 7. Exemple 1 - Utiliser minmax: En ce moment, même si notre mise en page est assez belle, il y a un petit problème. Si nous réduisons la fenêtre, si nous réduisons la fenêtre, vous verrez qu'à un moment donné, nos cartes sont coupées. En effet, ils n' ont pas assez d'espace pour s'intégrer dans notre disposition à cinq colonnes. Cela est principalement dû à cette hauteur maximale, définie sur l'image qui déclenchera également une largeur minimale rencontrée par la carte. Ce que nous voulons essayer, c'est de créer des colonnes qui poussent à un maximum d'un fr, mais qui n'atteindront jamais une largeur spécifique. En gros, ce que j' essaie de dire ici, c'est que nous utiliserons cette fonction minmax qui est une fonction introduite spécialement pour la grille CSS. Nous pouvons définir qu'une carte ne passera jamais sous 300 pixels et que sa taille maximale ira pour un fr. Si nous sauvegardons et actualisons, nous pouvons toujours voir certains problèmes. Notre disposition n'est pas tout à fait parfaite, mais au moins maintenant les cartes ont une largeur minimale de 300 pixels. Afin de corriger également ce défilement horizontal, ce que nous devrons faire, c'est au lieu de dire que tout le temps, nous allons tout insérer dans cinq colonnes, j' utiliserai un autre mot clé introduit pour la grille CSS, et s'adapte automatiquement. Cet ajustement automatique ressemble à essayer d' adapter autant de colonnes que possible. Cela ira pour un maximum de 1 fr mais ne passera jamais en dessous de 300 pixels. Après avoir actualisé la page, nous pouvons voir que nous avons une belle mise en page de deux colonnes qui ne passeront pas en dessous de 300 pixels. Si nous agrandissons l'écran, vous verrez que la mise en page essaie d' adapter autant de colonnes que possible avec l' hypothèse qui ne passera jamais en dessous de 300 pixels. En utilisant ces deux-là, l'ajustement automatique et le minimax, nous construisons essentiellement une mise en page réactive sans utiliser de requêtes multimédias. 8. Exemple 1 - Placement et placement: Par défaut, le gestionnaire de mise en page organise automatiquement les éléments dans une grille CSS. Mais il y a des cas où vous voudrez qu'un élément ait comme une position spécifique, disons que cette carte la Lannister House sera toujours le premier élément de notre grille CSS. Pour ce faire, j'ajouterai ici une autre classe appelée main. Cette classe principale sera définie sur l'objet que nous voulons passer en premier. Pour spécifier la position d'un article spécifique, nous pouvons utiliser la colonne de grille que je dirai cet article, je veux être placé sur la première colonne. Nous pouvons également utiliser la ligne de la grille si nous voulons également spécifier la ligne. Maintenant, si nous économisons, jetez un coup d'œil à cette carte. Lorsque nous nous actualiserons, nous verrons que cette carte est maintenant placée sur la première colonne et la première ligne. De plus, nous pouvons utiliser ces deux colonnes, les colonnes de la grille et la ligne de grille, pour que cet article s'étende sur plusieurs ventes. Si nous le voulons, disons celui-ci pour l'agrandir, également dans cette colonne et aussi dans cette rangée. Ce que je dirai ici, je vais entrer et ajouter un deuxième paramètre, en lui disant que, regardez, je veux commencer à partir de la première colonne et l'étaler sur deux colonnes. Je ferai exactement la même chose avec le brut. Nous allons enregistrer, nous verrons que maintenant notre carte initiale est répartie sur deux lignes et deux colonnes. Et elle jouera aussi bien si nous redimensionnons la fenêtre. 9. Exemple 2 - Introduction et description du projet: Voyons ce que nous voulons construire dans cet exemple. Nous avons une mise en page pour la page d'accueil. La disposition se déroule sur toute la hauteur de l'écran et se compose de cinq sections. Il y a cette section principale de contenu qui est initialement centrée et occupe la plus grande partie de l'immobilier de notre écran. Parallèlement à quatre autres sections secondaires, nous avons gauche 1, gauche 2, 1 droite et 2 à droite. Si nous réduisons la taille de notre fenêtre, cette disposition va changer et passera de la disposition à trois colonnes à une disposition à deux colonnes. Voyons maintenant ce que nous avons dans les fichiers de départ pour cet exemple. Nous avons deux fichiers, nous avons un index HTML et le style CSS. L'index HTML contient simplement le balisage minimum nécessaire pour que cette chose fonctionne. Nous avons une div qui est le bogue général de l'écart de notre exemple et qui a une classe de conteneur. Il y a cinq autres divs à l'intérieur. Chaque div a une classe comme la gauche 1, droite 1, la gauche 2, la droite 2. Au milieu, il y a cette div principale contenant la section principale de notre contenu. Dans le style CSS, ce ne sont que quelques propriétés CSS de base quelques propriétés CSS de base qui donnent à ce calque uniquement la couleur d'arrière-plan du général sélectionné quelques bordures pour nos cellules et la police. famille de sans serif. C'est le code que nous avons dans ces fichiers de départ. Voyons maintenant comment nous allons passer d'une mise en page simple comme celle-ci à un contenu bien agencé comme nous l'avons ici. 10. Exemple 2 - Définir les zones de modèle nommées dans une grille CSS: La balise de modèle de nom ici fonctionne en définissant des noms pour les sections de notre conception, puis en attribuant des éléments à ces noms. Voyons comment nous pouvons imiter ce design final. Si nous y jetons un coup d'œil, nous verrons que nous disposons essentiellement de cinq sections. Nous avons deux gauche et droits, et une section principale. Si nous allons ici et que nous sommes en mesure de mieux voir à quoi ressemblera la grille, nos noms peuvent ressembler à ceci. Au départ, ici, je peux nommer ce nom de modèle A, c'est le nom de modèle B, C, D. La seule chose que c'est un peu plus spécial est ce nom de modèle central, qui est essentiellement composé de deux cellules, toutes deux portant le même nom. Dans ce cas, je dirai que c'est X. Avec cela à l'esprit, je reviendrai dans mon exemple initial, et ici, nous devrons d'abord aller dans le « Container » et définir le fait qu'il s'agit d'une grille. Je dirai « Grille d'affichage ». La prochaine étape consistera à définir les zones de modèle. Je dirai « Zones de modèles de grille », et je vais ajouter une ligne à la fois. Au départ, nous avons dit que nous commencerons par la section intitulée A. Après cela, nous aurons ce X. Nous irons si la section B. Ensuite, nous aurons notre deuxième ligne avec le nom C, après cela, X encore, Et enfin D. Maintenant, si nous nous actualisons, la mise en page a un peu changé, mais ce n'est pas du tout ce que nous voulons. C'est parce que nous n'avons pas attribué le fait qu'il s' agit de la section A, de la section B , de la section X, etc. Pour cela, nous utiliserons la zone de grille. Je reviendrai ici, encore une fois, c'est la zone de grille nommée X, et après cela, j' ajouterai quatre lignes. Je dirai ici que L1 est Section A, R1 est Section B, L2 est Section C, et enfin, R2 est Section D. Gardez à l'esprit que toutes ces classes sont déjà affectées aux composants de notre grille. C'est L1, c' est L2, et ainsi de suite. Maintenant, si nous « sauvegardons », nous verrons que nous avons une mise en page qui commence à ressembler à celle que nous voulons avoir en fin de compte. 11. Exemple 2 - Setting les lignes et les tailles des colonnes: Si nous examinons le dernier exemple, nous verrons qu'il existe des différences par rapport à ce que nous avons actuellement dans notre fichier de travail. Une différence réside dans le fait que ces colonnes, celles de gauche et de droite, sont plus grandes que celles que nous avons ici. Les zones de modèle de grille peuvent facilement être combinées avec n'importe quelle autre propriété CSS. Afin de fixer cette largeur des colonnes, je peux venir ici et dire grid-template-colonnes. Je dirai que pour la première colonne je veux une largeur de 200 pixels. Pour le prochain, je veux prendre tout l'espace disponible. Dans ce cas, je dirai que je veux un fr, et pour le dernier, je veux avoir encore 200 pixels. Si nous économisons, nous verrons que la largeur de nos colonnes est maintenant exactement la même. Une autre différence par rapport au dernier exemple est le fait que celui-ci va jusqu'à la pleine hauteur. On peut être tenté de dire que, si ici les choses étaient résolues avec des colonnes de gabarits de grille, je peux venir utiliser les lignes et je peux dire grille-template-lignes. Étant donné que nous avons deux rangées qui doivent aller jusqu' à 50 %, je vais juste dire quelque chose comme la première ligne doit être sur un fr et la seconde doit être de nouveau sur un fr. Mais cela ne change rien dans notre mise en page. Si nous économisons, le résultat sera exactement le même. C'est parce que nous n'avons pas exprimé le fait que ce conteneur doit être informé de 100 %. Nous pouvons venir ici et dire que la hauteur notre conteneur est égale à 100 % de la hauteur de la fenêtre d'affichage. Si nous économisons, nous verrons que notre mise en page va maintenant de haut en bas. En guise de note, nous pouvons même supprimer la propriété lignes du modèle de grille. Parce que par défaut, notre système de grille, nous examinerons le fait qu'il comporte deux lignes et, par défaut, il attribuera un fr à chacune d'elles. En parlant de cela, nous pouvons même supprimer toutes ces déclarations et les choses se ressembleront exactement. Parce que la disposition de la grille fonctionne, c'est que lorsqu'elle doit placer un nouvel élément, disons celui-ci de gauche, il le place dans le premier espace disponible. Après cela, le suivant placera le deuxième espace disponible et ainsi de suite. Mais pour l'instant, nous garderons tout tel qu'il est pour toutes ces lunettes gauche et droite car nous aurons besoin qu'elles aient un meilleur cortical lorsque nous mettrons en œuvre la partie réactivité. 12. Exemple 2 - Maîtriser les éléments dans la grille CSS et en utilisant flexbox: Les modifications que nous avons apportées dans la leçon précédente ont en effet résolu le problème de la taille des lignes et des colonnes. Mais dans notre dernier exemple, le contenu est centré à l'intérieur d'une cellule. Vous savez peut-être que cela peut être très facile à réaliser avec quelque chose comme un écran flex. En effet, la grille CSS peut être combinée avec n'importe quel autre type d'affichage. Par exemple, si je vais ici à l'intérieur d'une div, et que je dis que cela a un flex d'affichage. Après cela, je dirai que le contenu de la justify-content est central et que les éléments d'alignement sont toujours au centre. Nous économisons. Nous pouvons maintenant constater que notre contenu est bien centré à la fois horizontalement et vertical, ce qui a été fait avec un affichage de flex. La morale de l'histoire est que nous pouvons toujours combiner la grille CSS avec n'importe quel autre type d'affichage. 13. Exemple 2 - Conceptions réactives avec la grille CSS: Une chose que j' aime vraiment dans la grille CSS, c'est le contrôle qu'elle nous permet d' avoir quand nous avons affaire à un design réactif. Supposons que notre disposition soit modifiée par quelque chose comme celui-ci lorsque l' écran est bas à 800 pixels. Bien sûr, pour cela, nous aurons besoin d'un type de requête multimédia. Je viendrai ici sous le conteneur et ici à la requête média et je dirai que lorsque notre écran est bas à 800 pixels, pour le conteneur, je veux avoir quelques changements. Si nous regardons dans l'exemple final, ce que nous voyons ici, c'est que la gauche et la droite se sont déplacées dans la rangée supérieure après cela, le contenu principal est la deuxième ligne et dans la dernière ligne, nous avons la gauche 2 et la droite 2 . Si nous examinons cette zone de modèle de grille, cela décrit à quoi ressemble notre mise en page. C'est bien parce que ce que je peux faire ici dans la requête média, c'est juste de remplacer cela. Je dirai donc que notre zone de gabarit de grille doit être quelque chose comme ça. Au départ, sur la première ligne, nous voulons avoir a et b. Après cela, sur la deuxième ligne, doit être rempli avec le x, et finalement, dans la dernière ligne, il y aura c et d. Si nous sauvegardons, nous verrons que certaines modifications ont pris part, mais quand même, la mise en page ne ressemble pas à ce que nous voulons qu'elle ressemble et c' est à cause de ces colonnes de modèle qui dit à la mise en page que nous avons trois colonnes et ils doivent être sur des tailles spécifiques. Mais ce que nous pouvons facilement faire dans notre requête média, c'est juste de prendre ces colonnes de modèle de grille et de dire que nous voulons l' auto [inaudible]. Cela affichera la mise en page exactement comme nous l'avons prévu dans l'exemple final. Plus encore, disons, par exemple, que si nous voulons déplacer ce contenu principal en haut, parce que je ne sais pas que c'est la partie la plus importante de tous les contenus, nous pouvons facilement y parvenir en prenant simplement ça, va le mettre ici. Après cela, si je veux économiser, nous verrons maintenant que le contenu principal joliment présenté dans le thème de notre page. Comme je l'ai dit, c'est une chose que j' aime vraiment dans la grille CS. Le fait qu'après avoir défini tous ces noms, nous pouvons facilement modifier l' ensemble de la mise en page. Nous avons juste un exemple de requête média et de la propriété grid-template-area. 14. Exemple 2 - L'attestation de la cellule vide et des conventions de nommage: Avant de terminer cet exercice, j'aimerais passer en revue quelques petits détails avec des zones de modèle de grille nommées. Tout d'abord, ces noms peuvent être les mots que nous voulons qu'ils soient. Je viens d'utiliser ici des lettres simples comme a, b, c et ainsi de suite, juste dans l'idée d'avoir une façon simple de les taper. Mais par exemple, si je veux changer celle-ci pour tester, les choses se passeront comme avant. La seule condition est que le nom soit utilisé également dans la classe correspondante. En parlant de ces noms, les noms sont sensibles à la casse. Par exemple, si ici je vais passer de x à la majuscule X et que j'économiserai, nous verrons que maintenant notre mise en page est passée à l'envers. La même chose se produit si je vais taper x entre guillemets, comme je le ferai pour les chaînes dans un langage de programmation. Un problème courant est le fait que nous voulons parfois dans notre mise en page qu'une cellule n'ait aucun contenu à l'intérieur. Par exemple, j'aimerais que ce droit 1 ne soit qu'une cellule vide. Une solution très courante consiste à remplacer simplement le nom b ou quel que soit le nom de cette cellule par un simple point. Mais une autre chose que je devrais faire avec cela est aussi supprimer le contenu réel ou sinon les choses vont casser. Une chose de moins, il y a des cas où nous ne voulons pas que la hauteur de la mise en page soit identique à la hauteur de notre page. Nous voulons simplement, disons que ces cellules mesurent 150 pixels. Donc ce que je vais faire ici, c'est de supprimer cette hauteur de 100 fenêtres. Après cela à l'intérieur d'une cellule, je viendrai dire que cette hauteur est de 150 pixels. Si nous économisons, nous pouvons maintenant être confondus par le fait que ce contenu principal ne se situe pas à la hauteur de la droite 1 et de la droite 2. Même si nous avons dit ici que nous avons X dans la première rangée et dans la deuxième rangée. Mais ce qui se passe réellement, c'est que cette hauteur de 100 pixels a également été appliquée au contenu principal. Mais notre cellule passe toujours d'une rangée à l'autre.