{"id":124700,"date":"2019-01-02T18:02:28","date_gmt":"2019-01-02T17:02:28","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-fluid-grid\/"},"modified":"2025-02-03T16:44:33","modified_gmt":"2025-02-03T15:44:33","slug":"create-a-fluid-grid","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/creer-une-grille-fluide","title":{"rendered":"Cr\u00e9er une grille fluide"},"content":{"rendered":"

Les grilles fluides peuvent adapter le contenu \u00e0 la taille de l’\u00e9cran. Pour les \u00e9crans web, le contenu peut \u00eatre mieux pr\u00e9sent\u00e9 sur trois colonnes, tandis que sur les \u00e9crans de tablettes, le contenu peut \u00eatre mieux pr\u00e9sent\u00e9 sur deux colonnes. Pour les \u00e9crans mobiles, le contenu peut \u00eatre mieux empil\u00e9 sur une seule colonne. Les grilles fluides d\u00e9finies \u00e0 l’aide d’\u00e9v\u00e9nements vous permettent d’atteindre cet objectif.

Grille \u00e0 trois colonnes :<\/h3>\n
    \n
  1. Faites glisser un panneau dynamique sur le canevas et fixez sa largeur \u00e0 100 %. Ensuite, modifiez sa disposition en horizontal et son alignement en central. Assurez-vous que le d\u00e9bordement horizontal est r\u00e9gl\u00e9 sur \u00ab\u00a0Wrap\u00a0\u00bb et ajoutez 20 px d’espacement vertical et horizontal.
  2. \u00c0 l’int\u00e9rieur de ce panneau, faites glisser un autre panneau dynamique, qui sera le premier conteneur du contenu de la grille. Fixez sa largeur \u00e0 31 %. Faites glisser quelques \u00e9l\u00e9ments dans le panneau dynamique pour qu’ils servent de contenu. Dans notre exemple, nous avons fait glisser un rectangle avec une image de fond et trois widgets Texte.
  3. S\u00e9lectionnez le panneau que vous avez cr\u00e9\u00e9 et copiez-le en appuyant sur Commande\/Contr\u00f4le-C. Ensuite, cliquez sur le panneau dynamique de base que vous avez cr\u00e9\u00e9 et appuyez sur Commande\/Contr\u00f4le-V. Vous dupliquez ainsi le panneau et le placez \u00e0 c\u00f4t\u00e9 de l’autre panneau que vous venez de cr\u00e9er et de copier. \"Plusieurs<\/li>\n
  4. Modifiez le contenu de ce panneau et faites-en ce que vous voulez.<\/li>\n
  5. R\u00e9p\u00e9tez les \u00e9tapes 3 et 4 plusieurs fois jusqu’\u00e0 ce que vous ayez six panneaux. Voici \u00e0 quoi devrait ressembler votre panneau \u00e0 trois colonnes :
    \n\"Tous<\/li>\n<\/ol>\n

    Grille \u00e0 deux colonnes :<\/h3>\n
      \n
    1. Revenez au panneau de base et ajoutez un autre panneau. Il s’agit de la grille \u00e0 deux colonnes. Modifiez la largeur de ce panneau pour qu’elle soit de 100 %, sa disposition pour qu’elle soit horizontale et son alignement pour qu’il soit central. Assurez-vous que le d\u00e9bordement horizontal est \u00e9galement r\u00e9gl\u00e9 sur \u00ab\u00a0Wrap\u00a0\u00bb. Ajoutez du rembourrage et de l’espacement \u00e0 la grille, si vous le souhaitez.
      \n\"Configuration<\/p>\n
      Remarque :<\/strong> \u00e9tant donn\u00e9 que le contenu de cette grille sera plus long que large, il se peut que vous deviez augmenter la hauteur de ce nouveau panneau pour qu’il soit plus long afin d’accueillir tout le contenu.<\/div>\n<\/li>\n
    2. \u00c0 l’int\u00e9rieur de ce panneau, faites glisser un autre panneau dynamique. Celui-ci sera le conteneur du contenu de la grille \u00e0 deux colonnes. D\u00e9finissez sa largeur \u00e0 47 %. Faites glisser quelques \u00e9l\u00e9ments dans le panneau dynamique pour qu’ils servent de contenu. \"Configuration<\/li>\n
    3. S\u00e9lectionnez le panneau que vous avez cr\u00e9\u00e9 et copiez-le en appuyant sur Commande\/Contr\u00f4le-C. Ensuite, cliquez sur le panneau dynamique de base que vous avez cr\u00e9\u00e9 et appuyez sur Commande\/Contr\u00f4le-V. Vous dupliquez ainsi le panneau et le placez \u00e0 c\u00f4t\u00e9 de l’autre panneau que vous avez cr\u00e9\u00e9. \"Visualiser<\/li>\n
    4. Modifiez le contenu de ce panneau et faites-en ce que vous voulez.<\/li>\n
    5. R\u00e9p\u00e9tez les \u00e9tapes 3 et 4 plusieurs fois jusqu’\u00e0 ce que vous obteniez six panneaux :\"Tous<\/li>\n<\/ol>\n

      Grille \u00e0 une colonne :<\/h3>\n
        \n
      1. Ajoutez un panneau suppl\u00e9mentaire au panneau de base. Il s’agit de la grille \u00e0 une colonne. \u00c0 l’int\u00e9rieur de ce panneau, modifiez sa largeur pour qu’elle soit de 100 %. Cette fois, changez sa disposition en verticale, mais gardez son alignement au centre. N’h\u00e9sitez pas \u00e0 ajouter un peu d’espacement vertical et de rembourrage.
        \n\"Configuration<\/p>\n
        Remarque :<\/strong> comme pour la derni\u00e8re colonne, le contenu de cette grille \u00e9tant plus long que large, il se peut que vous deviez augmenter la hauteur de ce nouveau panneau pour qu’il soit plus long afin d’accueillir tout le contenu.<\/div>\n<\/li>\n
      2. \u00c0 l’int\u00e9rieur de ce panneau, faites glisser un autre panneau dynamique. Ce panneau sera le conteneur du contenu de la grille. R\u00e9glez sa largeur \u00e0 90 %. Faites glisser un rectangle et trois widgets de texte dans le panneau. Il s’agit du contenu de la grille. \"Sous-panneaux<\/li>\n
      3. S\u00e9lectionnez le panneau que vous avez cr\u00e9\u00e9 et copiez-le en appuyant sur Commande\/Contr\u00f4le-C. Ensuite, cliquez sur le panneau dynamique de base que vous avez cr\u00e9\u00e9 et appuyez sur Commande\/Contr\u00f4le-V. Vous dupliquez ainsi le panneau et le placez sous l’autre panneau que vous avez cr\u00e9\u00e9. \"Affichage<\/li>\n
      4. Modifiez le contenu de ce panneau et faites-en ce que vous voulez.<\/li>\n
      5. R\u00e9p\u00e9tez les \u00e9tapes 3 et 4 plusieurs fois jusqu’\u00e0 ce que vous ayez six panneaux :\"Tous<\/li>\n<\/ol>\n

        Points d’arr\u00eat<\/h3>\n

        Nous allons maintenant cr\u00e9er les \u00e9v\u00e9nements qui permettront de passer d’une colonne \u00e0 l’autre en fonction de la taille de l’\u00e9cran. Suivez les \u00e9tapes suivantes pour apprendre \u00e0 le faire :<\/p>\n

          \n
        1. S\u00e9lectionnez le panneau dynamique de base et cr\u00e9ez un \u00ab\u00a0Redimensionnement de la fen\u00eatre\u00a0\u00bb + \u00ab\u00a0D\u00e9finir le panneau actif\u00a0\u00bb et s\u00e9lectionnez le panneau \u00e0 trois colonnes \u00e0 d\u00e9finir comme actif.\n