--- sourceDocument: Yokohama Créer ou modifier des applications sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/application-development Release : - yokohama ft:locale : - fr-FR ft:publication_title : - Yokohama Créer ou modifier des applications ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Utiliser les mises en page de grille CSS pour créer une page ============================================================ Utiliser les mises en page de grille CSS pour créer une page {#ariaid-title1} ============================================================================= * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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. La grille CSS 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 permet de contrôler 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](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) 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 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](https://servicenow-prod.fluidtopics.net/3E6QvANo8NwYir8pWDptRw "Les mises en page en colonnes organisent les composants d’une Générateur d'IU page. Découvrez comment les mises en page de colonnes sont utilisées dans 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 {#ariaid-title2} --------------------------------------------------------------------------------------------- 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 ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpérience. Consultez la rubrique [Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/Y1bOUW4pQdHutnAVEjdwrA "Découvrez ce qu’est une expérience dans Générateur d'IU. Comprendre le contenu d’une expérience.") pour plus d'informations sur la création d'expériences. 3. [Créer une page dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/7FlPZg9EshuX4KGkHUH3Ew "Créez une page Générateur d'IU pour un portail, un espace de travail ou une application personnalisée afin de créer une expérience Web pour vos utilisateurs."). 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. 6. Sélectionnez l'onglet Styles dans le panneau de configuration. 7. Dans la section Mise en page , vous devriez voir la grille en surbrillance. 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 afficher 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) pour en savoir plus sur les configurations de disposition 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](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#add-components "Découvrez comment ajouter des composants à votre page dans Générateur d'IU. Une page est créée en ajoutant 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 {#ariaid-title3} ------------------------------------------------------------------------------------------- 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 la grille CSS pour modifier votre CSS afin de personnaliser la mise en page de votre page. ### Procédure 1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpérience. Consultez la rubrique [Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/Y1bOUW4pQdHutnAVEjdwrA "Découvrez ce qu’est une expérience dans Générateur d'IU. Comprendre le contenu d’une expérience.") pour plus d'informations sur la création d'expériences. 3. [Créer une page dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/7FlPZg9EshuX4KGkHUH3Ew "Créez une page Générateur d'IU pour un portail, un espace de travail ou une application personnalisée afin de créer une expérience Web pour vos utilisateurs.") ou ouvrez une page. 4. Cliquez sur l'onglet Mise en page et choisissez la mise en page à deux lignes par deux colonnes. Figure 2. Mise en page standard à deux rangées et deux colonnes 5. Cliquez sur Modifier le code de mise en page. Figure 3. Modifier le code de mise en page 6. Développez l'éditeur de code afin de pouvoir afficher facilement le code CSS. Figure 4. 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 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 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 Vous pouvez définir de nombreuses configurations différentes. Dans cet exemple, il y a les deux grilles résultantes de deux zones de modèle de grille différentes. La "grid-template-areas" propriété en cours de modification définit la propriété CSS du même nom. Pour plus d'informations, consultez [grid-templates-areas MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas). Figure 8. 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 {#create-a-css-grid-layout__steps_acx_kmr_qpb} ### 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 rangées et deux colonnes.Figure 10. Nouvelle mise en page personnalisée Cliquez sur Rétablir l'original pour rétablir les changements de mise en page à tout moment. Figure 11. Réinitialiser une mise en page **Tâches associées** * [Créer une mise en page Flexbox avec l'ancien système de mise en page](https://servicenow-prod.fluidtopics.net/d5eHiDNfIDixvzGi4vjBng#flexbox-uib-old-layout "Créez une mise en page Flexbox 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.")