PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

Admin Page Grids

In the Admin, a grid is used on all pages to establish global layouts for page templates. The grid assigns a set number of columns and rows for a page, and designers can create a layout by dividing the columns into sections, where design patterns and content can be placed.

Page Grid

  • A 12-column fluid-width content grid is placed next to the page’s 1-column fixed-width left navigation
  • The 12-column grid’s minimum width spans 984px. The grid expands its layout across larger screens.
  • For views smaller than 984px, a page’s layout doesn’t change as the page shrinks to fit smaller screen widths.

Slide-Out Grid

A Slide-out panel, similar to a modal window, breaks apart and simplifies a complex subtask that is included within a primary task.

For example:

  • On a product details form page, a user clicks "Add Attribute".
  • A panel slides over the parent page and shows "Add Attribute" functionality.
  • When the user finishes adding attributes, the panel disappears, and the user returns the product details form page.

Layout and behavior: When a panel spawns, it slides from right to left atop and almost completely over the parent page. A narrow gutter of space remains at left, showing the left navigation and a small sliver of the parent page.

Standard layout within the edges of a browser screen

(Panel position in relation to browser edge)

Spacing: Slide-out content is contained in a 12-column page grid, with additional 15px padding on the left edge. The gutter spacing at left is fluid, based on browser width.

(Nested page-grid with additional padding)

Nested Slide-outs: For multiple panels displayed, additional gutter space is used at left to show a small sliver of a Slide-out below another Slide-out.