Inhalte aufrufen


New Chrome DevTool: Inspect CSS Grid

Page Builder Webdesign

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

#1 stefanmueller


    SmartStore AG

  • Administrators
  • 300 Beiträge

Geschrieben: 29 December 2020 - 12:27

Smartstore CMS Page Builder uses the CSS Grid Technology to render its designs. Page Builder Users do not have to know about CSS grids to create nice designs. Now there is a new webdeveloper tool in Google Chrome Browser: Inspect CSS Grid. You find it in the Developer Tools.


See https://developers.g...vtools/css/grid


When an HTML element on a web page has display: grid or display: inline-grid applied to it, you can see a grey grid badge (see red circle in screenshot below) next to it in the HTML Source at Chrome Browser "Elements" panel. Click that badge "grid" to toggle the display of a grid overlay on the page.


The new Chrome "Layout" pane has a grid section (see red arrow) offering you a number of options for viewing the grids and its table-like layout structure, and a list of all grids on a webpage.


Angehängte Datei  smartstore-chrome-grid-screenshot.jpg   112.26K   1 Anzahl Downloads


As you can see on homepage, where we use Page Builder and CSS grids heavily, there are many grids in that list to view and inspect.





  • GalenKa gefällt das

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