Panels - CSS viewer

Layout

This section is divided into two tabs: "layout" and "box model".

The first will show you all the properties associated with the "display" property of the element (the properties displayed will change accordingly) and the "overflow" and "cursor" properties.
The second tab is associated with the box model concept and placement properties.

Grid-template-areas

The grid-template-areas section allows you to change the property with the same name.
You can add / remove columns and rows by clicking on the + Row, -Row, + Col, -col buttons.

The video below shows you how to set the property.

Box Model Grid

This part allows you to modify the "margin", "padding", "border" (size only), "top", "left", "bottom" and "right" properties if the value of "position" is different from "static". When the button is selected, the property values will all be the same (see video below).

At the top are the calculated values (in pixels) of the element's width and height.