--- sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development Release : - yokohama ft:locale : - de-DE ft:publication_title : - Yokohama Erstellen oder ändern Sie Anwendungen ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Verwenden von CSS-Rasterlayouts zum Erstellen einer Seite ========================================================= Verwenden von CSS-Rasterlayouts zum Erstellen einer Seite {#ariaid-title1} ========================================================================== * Freigeben Version: Yokohama * * Aktualisiert 30. Januar 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 Minuten Lesedauer Erstellen Sie ein CSS-Rasterlayout in UI Builder, um leistungsstarke Seiten zu erstellen, die Sie mit Cascading Style Sheets (CSS) anpassen und Ihre Leistung verbessern können. CSS-Raster ist das leistungsfähigste Layoutsystem in CSS. CSS-Raster basiert auf einem zweidimensionalen Raster. Mit CSS-Raster können Sie steuern, wie Sie Ihre Seiten erstellen. Verwenden Sie UI Builder, um ein CSS-Rasterlayout mit Low-Code-Layoutkonfigurationseigenschaften zu implementieren. Bei erweiterten Layouts können Sie CSS-Code anzeigen und bearbeiten, um Ihre Layouts anzupassen. Besuchen Sie [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/grid), um mehr über CSS-Raster zu erfahren. Sie können beispielsweise ein Raster mit drei Spalten und drei Zeilen verwenden, um ein Raster mit neun Zellen zu erstellen. Sie können Komponenten innerhalb dieser Zellen platzieren oder die Komponente auf mehrere Zellen aufspannen lassen. Abbildung : 1. CSS-Rasterlayout Durch das Anpassen des Layouts Ihrer Seite können Sie das CSS-Raster optimal nutzen und so Ihr gesamtes Seitendesign erreichen. Weitere Informationen finden Sie unter [Komponenten in UI Builder-Seiten organisieren](https://servicenow-prod.fluidtopics.net/zC9vc816~Qf2~Zwzr9g_lA "Spaltenlayouts zum Organisieren von Komponenten auf einer Seite UI Builder. Erfahren Sie, wie Spaltenlayouts in UI Builderverwendet werden."). Weitere Informationen zu CSS-Layouts in Ihrer Instanz UI Builder finden Sie in der Tabelle \[sys_uib_template\]. Erstellen Sie ein CSS-Rasterlayout mit dem neuen Layoutsystem {#ariaid-title2} ------------------------------------------------------------------------------ Erstellen Sie ein CSS-Rasterlayout in UI Builder, um leistungsstarke Seiten in einer Umgebung mit wenig Code zu erstellen. ### Vorbereitungen Erforderliche Rolle: Administrator ### Prozedur 1. Navigieren zu AlleNow-Experience-FrameworkUI Builder. 2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen ErstellenExperience. Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. [Erstellen Sie eine Seite in UI Builder](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen."). 4. Wählen Sie in der Phase UI Builder die Schaltfläche + Inhalt hinzufügen aus. 5. Wählen Sie Raster auf der Registerkarte Layouts. 6. Wählen Sie im Konfigurationsbereich die Registerkarte Stile. 7. Im Abschnitt „Layout" sollte Raster hervorgehoben sein. 8. Im Abschnitt „Layout" der Registerkarte „Stile" können Sie Folgendes ändern: Spalten : Definiert die Anzahl, Reihenfolge und Breite von Rasterspalten. Zeilen : Definiert die Anzahl, Reihenfolge und Breite von Rasterzeilen. Richtung : Legt fest, ob neu hinzugefügte Komponenten horizontal oder vertikal gestapelt werden. Abstand : Legt die Größe des Abstands zwischen Zeilen und Spalten fest. Hinweis: Wählen Sie Erweiterte Layoutoptionen anzeigen aus, um die nächsten vier Optionen anzuzeigen. Elemente ausrichten : Definiert, wie Komponenten innerhalb des Containers als Gruppe ausgerichtet werden. Elemente begründen : Definiert, wie der Browser Platz zwischen und um Inhaltselemente entlang der Inline-Achse eines Rastercontainers verteilt. Inhalt ausrichten : Legt die Verteilung des Platzes zwischen und um Inhaltselemente entlang der Blockachse eines Rasters fest. Inhalt begründen : Definiert, wie die Komponenten innerhalb des Containers verpackt oder verteilt werden. Besuchen Sie [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout), um mehr über die Konfiguration des CSS-Rasterlayouts zu erfahren. 9. **Wahlweise:** Sie können den CSS-Code bearbeiten, indem Sie Erweiterte Konfigurationsoptionen anzeigen unten auf der Registerkarte Stile und dann die Option CSS anzeigen und bearbeiten auswählen. 10. Wählen Sie Speichern. Ihre Seite wird aktualisiert und zeigt die am Layout vorgenommenen Änderungen an. 11. Fügen Sie Ihrer Seite Komponenten hinzu. Weitere Informationen finden Sie unter [Komponenten hinzufügen und konfigurieren](https://servicenow-prod.fluidtopics.net/u0roCpbWC9yIy7XURU_kKw#add-components "Erfahren Sie, wie Sie Ihrer Seite in UI BuilderKomponenten hinzufügen. Eine Seite wird durch das Hinzufügen von Komponenten erstellt."). 12. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie ![die Schaltfläche Vorschau wählen, die die Seitenvariante öffnet.](). Erstellen Sie ein CSS-Rasterlayout mit dem alten Layoutsystem {#ariaid-title3} ------------------------------------------------------------------------------ Erstellen Sie ein CSS-Rasterlayout in UI Builder, um leistungsstarke Seiten zu erstellen, die Sie mit Cascading Style Sheets (CSS) anpassen und Ihre Leistung verbessern können. ### Vorbereitungen Erforderliche Rolle: Administrator ### Warum und wann dieser Vorgang ausgeführt wird Im folgenden Verfahren erfahren Sie, wie Sie das CSS-Raster verwenden, um Ihr CSS zu ändern, um das Layout Ihrer Seite anzupassen. ### Prozedur 1. Navigieren zu AlleNow-Experience-FrameworkUI Builder. 2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen ErstellenExperience. Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. [Erstellen Sie eine Seite in UI Builder](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen.") oder öffnen Sie eine Seite. 4. Klicken Sie auf die Registerkarte Layout, und wählen Sie das Layout mit zwei Zeilen und zwei Spalten aus. Abbildung : 2. Standardlayout mit zwei Zeilen und zwei Spalten 5. Klicken Sie auf Layoutcode bearbeiten. Abbildung : 3. Bearbeiten Sie den Layoutcode 6. Erweitern Sie den Code-Editor, um den CSS-Code einfach anzeigen zu können. Abbildung : 4. Erweitern Sie den Code-Editor 7. Fügen Sie dem Layout einen weiteren Slot hinzu, indem Sie den CSS-Code für einen vorhandenen Slot kopieren. Das Kopieren des CSS-Codes ist einfacher als das Eingeben in das Layout. Abbildung : 5. Kopieren Sie den CSS-Code für einen Slot 8. Fügen Sie den CSS-Code unter dem kopierten Code ein, und ändern Sie slotName und grid-area in einen eindeutigen Wert. Abbildung : 6. Fügen Sie den CSS-Code ein 9. Ändern Sie die Layoutregeln wie folgt, um die neue Spalte und den Vorlagenbereich einzubeziehen: 1. Löschen Sie die Zeile `„Raster-Vorlagen-Spalten": „1fr 1fr"`. 2. Fügen Sie eine zweite Zelle1 nach Zelle1und Zelle5 nach Zelle4hinzu. Abbildung : 7. Ändern Sie die Layoutregeln Sie können viele verschiedene Konfigurationen festlegen. In diesem Beispiel gibt es die beiden resultierenden Raster aus zwei verschiedenen Rastervorlagenbereichen. Die Eigenschaft "grid-template-areas", die geändert wird, legt die gleichnamige CSS-Eigenschaft fest. Weitere Informationen finden Sie unter [MDN-Rastervorlagenbereiche](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas). Abbildung : 8. Rastervorlagenbereiche 10. Reduzieren Sie die erweiterte Ansicht, und klicken Sie dann auf Übernehmen. Abbildung : 9. Wenden Sie eine Layoutänderung an {#create-a-css-grid-layout__steps_acx_kmr_qpb} ### Ergebnisse Das neue CSS-Rasterlayout zeigt, dass der neue Slot dem ursprünglichen Layout mit zwei Zeilen und zwei Spalten hinzugefügt wurde.Abbildung : 10. Neues anwenderdefiniertes Layout Klicken Sie jederzeit auf Auf Ursprung zurücksetzen, um die Layout-Änderungen auf den Ursprung zurückzusetzen. Abbildung : 11. Setzen Sie ein Layout zurück **Zugehörige Tasks** * [Erstellen Sie ein Flexbox-Layout mit dem alten Layoutsystem](https://servicenow-prod.fluidtopics.net/D4K20wrj5~DS4bhNapeVCQ#flexbox-uib-old-layout "Erstellen Sie ein Flexbox-Layout in UI Builder, um leistungsstarke Seiten zu erstellen, die Sie mit Cascading Style Sheets (CSS) anpassen und Ihre Leistung verbessern können.")