Inhalte aufrufen

Profilbild

Neues Webdeveloper-Tool im Google Chrome Browser: Inspect CSS Grid

Page Builder Webdesign

  • Bitte melden Sie sich an, um eine Antwort zu verfassen.
Keine Antworten zum Thema vorhanden

#1 stefanmueller

stefanmueller

    SmartStore AG

  • Administrators
  • 227 Beiträge

Geschrieben: 29 December 2020 - 12:33

Smartstore CMS Page Builder verwendet die CSS-Grid-Technologie, um seine Designs zu rendern. Page Builder-Benutzer müssen sich nicht mit CSS-Gittern auskennen, um schöne Designs zu erstellen. Jetzt gibt es ein neues Webdeveloper-Tool im Google Chrome Browser: Inspect CSS Grid. Sie finden es in den Entwicklertools.
 
 
 
Wenn auf ein HTML-Element auf einer Webseite display: grid oder display: inline-grid angewendet wurde, sehen Sie in der HTML-Quelltext im Chrome-Browser-Panel "Elements" ein graues Grid-Badge (siehe roter Kreis im Screenshot unten). Klicken Sie auf dieses Badge "grid", um die Anzeige eines Raster-Overlays auf der Seite einzuschalten.
 
 
Das Chrome-Bedienfeld "Layout" verfügt über einen neuen Abschnitt "Grid" (siehe roter Pfeil), der Ihnen eine Reihe von Optionen zur Anzeige des Grids und seiner tabellenartigen Layoutstruktur sowie eine Liste aller Grids auf einer Webseite bietet.
 
smartstore-chrome-grid-screenshot.jpg

 

 
Wie Sie auf der Startseite von smartstore.com sehen können, wo wir Page Builder und CSS-Grids intensiv nutzen, gibt es viele Grids in dieser Liste zum Ansehen und Prüfen.
 
 
 
 
 



Auch markiert mit einem oder mehrerer dieser Schlüsselwörter: Page Builder, Webdesign