Utiliser des mises en page de grille CSS pour créer une page

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 5 minutes de lecture

    • Créez une mise en page de grille CSS pour Générateur d'IU créer des pages puissantes afin de pouvoir les personnaliser avec des feuilles de style en cascade (CSS) et d’améliorer vos performances.

    CSS Grid est le système de mise en page le plus puissant de CSS. La grille CSS est construite sur une grille bidimensionnelle. La grille CSS vous donne le contrôle sur la façon dont vous créez vos pages. Utilisez cette propriété Générateur d'IU pour implémenter une mise en page de grille CSS à l’aide de propriétés de configuration de mise en page low-code. Pour les mises en page avancées, vous pouvez afficher et modifier le code CSS pour personnaliser vos mises en page. Visitez Mozilla pour en savoir plus sur CSS Grid.

    Par exemple, vous pouvez avoir une grille avec trois colonnes et trois lignes pour faire une grille de neuf cellules. Vous pouvez placer des composants à l’intérieur de ces cellules ou faire en sorte que le composant s’étende sur plusieurs cellules.

    Figure 1. Mise en page de grille CSS
    Mise en page de grille CSS

    La personnalisation de la mise en page de votre page vous permet de tirer pleinement parti de la grille CSS afin de réaliser la conception globale de votre page. Pour plus d'informations, consultez Organiser les composants dans les pages du générateur d'IU.

    Pour en savoir plus sur les mises en page CSS dans votre Générateur d'IU instance, vous pouvez les trouver dans le tableau [sys_uib_template].

    Créer une mise en page de grille CSS avec le nouveau système de mise en page

    Créez une mise en page de grille CSS pour Générateur d'IU créer des pages puissantes dans un environnement low-code.

    Avant de commencer

    Rôle requis : admin

    Procédure

    1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant Créer > Expérience.
      Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
    3. Créer une page dans Générateur d'IU.
    4. Sélectionnez le bouton + Ajouter du contenu dans l’étape Générateur d'IU .
    5. Sélectionnez Grille dans l’onglet Mises en page.
      Flèche pointant vers l’option Grille dans l’onglet Mises en page de la boîte à outils.
    6. Sélectionnez l’onglet Styles dans le panneau de configuration.
    7. Dans la section Mise en page , vous devez voir Grille en surbrillance.
      Flèche pointant vers l’option Grille dans l’onglet styles du panneau de configuration.
    8. Dans la section Mise en page de l’onglet Styles, vous pouvez modifier les éléments suivants :
      Colonnes
      Définit le nombre, l’ordre et la largeur des colonnes de la grille.
      Lignes
      Définit le nombre, l’ordre et la largeur des lignes de grille.
      Direction
      Définit si les composants nouvellement ajoutés sont empilés à l'horizontale ou à la verticale.
      Écart
      Définit la taille de l'écart entre les lignes et les colonnes.
      Remarque :
      Sélectionnez Afficher les options avancées de mise en page pour voir les quatre options suivantes.
      Aligner les éléments
      Définit la façon dont les composants du conteneur s’alignent en tant que groupe.
      Justifier les éléments
      Définit la façon dont le navigateur distribue l’espace entre et autour des éléments de contenu le long de l’axe en ligne d’un conteneur de grille.
      Aligner le contenu
      Définit la distribution de l’espace entre et autour des éléments de contenu le long de l’axe de bloc d’une grille.
      Justifier le contenu
      Définit la façon de condenser ou d'espacer les composants à l'intérieur du conteneur.

      Visitez Mozilla pour en savoir plus sur les configurations de mise en page de grille CSS.

    9. Facultatif : Vous pouvez modifier le code CSS en sélectionnant Afficher les options de configuration avancées en bas de l’onglet Styles , puis en sélectionnant l’option Afficher et modifier CSS .
    10. Sélectionnez Enregistrer.
      Votre page s’actualise et affiche les modifications apportées à la mise en page.
    11. Ajoutez des composants à votre page.
      Consultez Ajouter et configurer des composants pour plus d'informations.
    12. Affichez et testez votre page en sélectionnant le bouton Aperçu qui ouvre la variante de page.

    Créer une mise en page de grille CSS avec l’ancien système de mise en page

    Créez une mise en page de grille CSS pour Générateur d'IU créer des pages puissantes afin de pouvoir les personnaliser avec des feuilles de style en cascade (CSS) et d’améliorer vos performances.

    Avant de commencer

    Rôle requis : admin

    Pourquoi et quand exécuter cette tâche

    Dans la procédure suivante, vous apprendrez à utiliser CSS Grid pour modifier votre CSS afin de personnaliser la mise en page de votre page.

    Procédure

    1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant Créer > Expérience.
      Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
    3. Créer une page dans Générateur d'IU ou ouvrir une page.
    4. Cliquez sur l’onglet Mise en page et choisissez la mise en page de deux lignes par deux colonnes.
      Figure 2. Mise en page standard à deux lignes et deux colonnes
      Mise en page standard à deux lignes et deux colonnes.
    5. Cliquez sur Modifier le code de mise en page.
      Figure 3. Modifier le code de mise en page
      Option Modifier le code de mise en page.
    6. Développez l’éditeur de code pour pouvoir facilement afficher le code CSS.
      Figure 4. Développer l’éditeur de code
      Flèche pointant vers le bouton Développer l’éditeur de code.
    7. Ajoutez un autre emplacement à la mise en page en copiant le code CSS d’un emplacement existant.

      Copier le code CSS est plus facile que de le taper dans la mise en page.

      Figure 5. Copier le code CSS d’un emplacement
      Flèche pointant vers la copie du code CSS pour un emplacement.
    8. Collez le code CSS sous le code que vous avez copié et remplacez le slotName et grid-area par une valeur unique.
      Figure 6. Collez le code CSS
      Coller le code CSS.
    9. Modifiez les règles de mise en page pour inclure la nouvelle colonne et la nouvelle zone de modèle, comme suit :
      1. Supprimez la ligne « Grid-template-columns » : « 1fr 1fr ».
      2. Ajoutez une deuxième cellule1 après cellule1, puis ajoutez cellule5 après cellule4.
      Figure 7. Modifier les règles de mise en page
      Modification des règles de mise en page.

      Vous pouvez définir de nombreuses configurations différentes. Dans cet exemple, les deux grilles résultantes proviennent de deux zones de modèle de grille différentes. La "grid-template-areas" propriété modifiée définit la propriété CSS du même nom. Pour plus d’informations, voir MDN grid-templates-areas.

      Figure 8. Zones du modèle de grille
      Zones des modèles de grille.
    10. Réduisez la vue développée, puis cliquez sur Appliquer.
      Figure 9. Appliquer un changement de mise en page
      Application d’un changement de mise en page.

    Résultats

    La nouvelle mise en page de la grille CSS montre que le nouvel emplacement a été ajouté à la mise en page originale à deux lignes et deux colonnes.
    Figure 10. Nouvelle mise en page personnalisée
    Nouvelle disposition personnalisée.
    Cliquez sur Rétablir l’original pour rétablir les changements de mise en page à l’origine à tout moment.
    Figure 11. Réinitialiser une mise en page
    Flèche pointant vers l’option Réinitialiser à l’origine.