CSS : Positionnement et mise en page

Explorer les areas

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Explorez les multiples propriétés qui gravitent autour de l'environnement des grid-template-areas. Ainsi, abordez les mises en pages les plus complexes avec grande souplesse.
10:14

Transcription

Prenons quelques instants pour explorer les diverses possibilités que nous offre justement cette magic template area. Alors ici on a simplement un damier de 9 div qui sont identifiées par case 1 à 9 et contenant les lettres de a à i, et contenues au sein d’un article. Ici, on a le rendu de la page qui donne simplement les quatre lettres sur les div contenues. Alors je vous propose maintenant de rentrer dans le style et d’aller au niveau des articles, placer l’article en display : grid puisque c’est lui qui va contenir cette grille. Voilà, on n’est pas obligé d'utiliser la grille sur un conteneur comme le body ou un wraper global, ça peut être un simple nœud qui contient des éléménts, et tous ces éléments je vais les placer sur la grille qui est définie par le nœud parent. Donc ici, on va aller définir maintenant le grid : templates colonnes. On va faire 3 colonnes, on va faire un damier de 3 sur 3. 3 colonnes, trois fois une fois la fraction ; un template row en automatique et on va définir le area cette fois-ci en disant attention, les areas on va faire a b c , en première ligne, d e f , g h i. Ce qui nous reste à faire maintenant, c’est simplement aller de la case 1 à la case 9, définir un grid area a, b, c etc. Maintenant que cela est fait, si on le fait, ctrl+s, on va pouvoir actualiser ici. Voila, actualiser, et on voit bien que nos éléments sont placés en colonne. Pour mieux les distinguer, je vous propose de rajouter une bordure à notre div et quand on actualise on voit bien nos éléments. C’est vrai que les éléments sont engoncés les uns dans les autres, puisqu’on a aussi des areas : row en automatique, on pourrait venir définir ici une hauteur, voilà, trois hauteurs pour chacune des row, mais c’est un peu des fois dommage de définir des hauteurs, puisqu'il vaut mieux laisser libre choix au contenu. Ce qu’on va faire, puisqu’elles sont en auto, c’est définir une hauteur au niveau de l’article cette fois-ci pour justement lui dire, utilise la totalité de l’espace, et il va se répartir sur cet espace. Si vous voyez ici, l'espace sort un peu. Pourquoi sort-il ? Tout simplement, parce qu’on n’a pas réinitialisé notre body. alors on va replacer un CSS reset au niveau global et on voit bien que maintenant on a nos cases qui sont toutes récupérées. Donc vous voyez que c’est très simple de faire un damier par ces zones de areas. Cela aurait été simple si on avait de la flottaison et des dimensions un peu fixes mais là c’est vraiment adaptatif parce que si je redimensionne maintenant mon contenu ici, vous voyez, les colonnes se redimensionnent et je peux le redimensionner également à ce niveau-là. Tout se réadapte. Donc cela reste quand même fluide et assez impressionnant de simplicité. Pour l’instant tous les éléments se touchent, mais on a une propriété ici qui va être de dire que je vais pouvoir mettre un grid gap ici tout simplement, une gouttière ou un espace, et cet espace je vais le mettre de 1em. Donc 1em vertical, 1em horizontal, et là ici, si j’enregistre. J’actualise. J’ai ma gouttière qui se place entre les éléments et non pas sur les bords d'éléments. C’est bien un gap c’est pas un margin comme j'aurais pu appliquer. Certains auraient pu dire, il aurait fallu calculer le premier, le dernier... Là, on ne calcule pas, ça se fait tout seul. Donc vous avez vu que les blocs s’adaptent vraiment bien. Alors ici on pourrait faire un grid-template-column, je vais copier ici jusque-là, mais je vais le commenter ici aussi également, et ce que je vous propose de faire ici, c’est d’explorer une autre possibilité, qui serait de dire : je veux 200 pixels ici, je veux 200 pixels à droite, mais au milieu, j’aimerais que cela s’adapte. Eh bien, je vais utiliser un auto, comme on avait utilisé un auto pour les row tout à l’heure. Et regardez ici, ça fait 200 pixels, 200 pixels et cela doit faire 600 pixels en fait, tout juste pour avoir le côté automatique parce que, regardez. Ici, si je l’agrandis... Ah ! Il ne me l’a pas pris. oui, j’ai une petite erreur de syntaxe qui explique le tout. J’actualise ma page, et vous voyez bien que le milieu maintenant va s’adapter sur l’espace restant, Et ça, c’est encore une fois fabuleux à pouvoir gérer. On pourrait le faire également sur les row etc, mais vous pouvez donner un côté élastique à une des colonnes et pas aux autres. Pour positionner tous nos éléments ici, je vais positionner tous nos éléments, on a accès à une propriété qui s’appelle justify-items, qui va dire qu’en fait par défaut ils sont positionnés au départ mais je pourrais les positionner au end. Regardez ici, si j’actualise, ils sont tous positionnés au end, alors bien entendu la colonne, puisque je suis positionné au end, elle se rétracte jusqu’à la hauteur de l’élément. Je pourrais le mettre également en center ici. Donc, à ce moment-là ma position va pouvoir être en center. Et ici, je pourrais dire, attention non, ce que je veux, c'est la case 1 le a je ne le veux pas au milieu, je ne le veux pas ici, je le voudrais à la fin par exemple. Donc je vais pouvoir faire un justify-self lui-même à la end, ctrl+S et si j’actualise, vous voyez bien que lui tout seul se positionne à la fin. Donc c’est assez fabuleux parce qu’on peut positionner ces éléments. Alors juste en commentaire ici, je place les diverses propriétés qu’on va avoir, donc start, end, center et stretch, qui étirerait l’intégralité de l’élément. Voilà, si on le place sur le b ici, si j’enregistre et que j’actualise, vous voyez que le b se stretch, par contre il se replace automatiquement au début, puisqu’il est stretch, donc c’est simplement son contenu qui est étiré, et le texte ne s’étire pas, cela reste du texte. Ce qui nous permet, si on actualise, de centrer. Alors ce qui me chagrine, c’est ce commentaire-là, je vais plutôt le faire comme ça, ctrl+s, et j'actualise. Voilà, il ne met pas le commentaire. Donc ici, cela nous permet d’actualiser et de mettre l’alignement vertical, cette fois-ci sur la rangée et non plus sur l’élément. Et bien entendu on peut venir ici passer sur un seul élément, align-self : ici, en lui disant qu’il serait par exemple start pour le b. Et le b va, lui, être en premier départ. On a une autre possibilité, le justify content, alors ici on ne va pas pouvoir le voir dans ce sens-là. mais on va essayer le justify content qui lui va se baser sur l’ensemble de l’article, sur l’ensemble de ce positionnement de l’article. Comment va-t-on le mettre ? Alors on va pouvoir le mettre en stretch mais aussi en start également. Ici, ctrl+S, si j’actualise ici, on le voit : il ne part pas sur la largeur globale. il va s’étirer au maximum du contenu. Vous voyez, alors que si, par défaut, on le met en stretch ici, ctrl+s, lui va étirer l’ensemble du contenu de l’article. Donc si je reviens en start et que je mets ici le align-content, si au lieu de le mettre en début je le mets en fin ici, si je l’enregistre et que je repars, on voit bien qu'on peut comme ça de la même manière, venir positionner tous nos éléments de justify-content et de align-content, en fait c’est le bloc article qui va se placer. Donc si par défaut, eux je les commente, je vais les commenter C2, ils seront par défaut en stretch, ils vont donc s’étirer et utiliser l’intégralité de l’espace. Enfin, un autre élément assez intéressant, si je prends par exemple la case e ici, si je lui dis que la e, par exemple, je vais lui placer un background color histoire de pouvoir la visualiser. Je vais la mettre en lightgrey, comme ça je peux la visualiser plus facilement. Et là, je vais dire que son grid-area, bien sûr on va venir commenter cette partie-là, la première partie ici, et ici si je viens sur le grid-area. Donc, au lieu de l placer en e, on pourrait dire que le grid area, il aura comme rangée de départ 2, on place un slash de séparation. La colonne de départ, c'est 2. donc on va dire qu’on serait en 2 ici et 2 là, la position e actuelle. Et je pourrais lui dire, c’est 2 de l’arrivée, la même chose. Ctrl+s, si j’actualise, on va dire qu’ici c’est cet élément-là. Par contre je lui dis maintenant l’arrivée c’est la rangée 3, colonne 3. On va utiliser ces 2 espaces ici, ctrl+s, pour remplir l’élément. Et vous voyez ici, on voit le i qui n’est pas fait, mais le plus simple pour voir tous ces éléments-là, c’est de venir commenter l’intégralité de cet élément et ici finir sur cet élément-là. ctrl+s, j’actualise. Vous voyez bien que le e cette-fois çi, va bien commencer à la 2 et finir à la 3, F9. On commence bien à la 2 et on finit à la 3. Si maintenant, je veux finir à la prochaine, c’est-à-dire à la quatrième ici, qui n’existe pas et que nous n’avons pas définie, je viens lui dire 4 et là 4. On voit bien maintenant que le e va s’étendre au-dessus. Donc ici, si j’actualise, du i on va venir partir de la 2, à la 4, ici. Donc un ensemble de propriétés qui sont vraiment intéressantes et qui vont nous permettre de revoir complètement l'approche de la mise en page de nos contenus. Donc ici, je vous propose de venir sur CSS tricks, l’article qui a été écrit par Chris House, qui est fabuleux et qui nous parle de tous les éléments propriétés, donc à gauche vous avez le container, à droite les items, ou si vous allez sur son propre site, sur chris.house.blog, vous avez la possibilité également d’avoir ici l’intégralité de son contenu avec toutes les explications, les détails, les propriétés valables et utilisables, et puis un excellent site qui permet d’avoir des grilles par l'exemple. Vous avez différentes approches assez complexes, ça part de quelque chose de très basique et puis cela monte dans la complexité, Ca vous permet de voir comment vous allez réorganiser l’intégralité de vos contenus de page et n’oubliez pas qu’en responsive, vous allez pouvoir agir et changer l'area. Rappelez-vous le premier exemple.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !