Layouts

Common grid layout patterns used throughout Dialpad and UberConference.

Sidebar

Use .d-gl-sidebar to create a simple 2-column layout with a sidebar and main content area.

CSS Variables

CSS Var Output
var(--sidebar-width) minmax(20rem, 30rem);
var(--content-width) minmax(32rem, 90ch);

Example

Header

Use .d-gl-header to create a simple 2-row layout with a header area and main content area. Usually this is nested within a .d-gl-sidebar content area.

CSS Variables

CSS Var Output
var(--header-height) minmax(6.4rem, min-content);
var(--content-height) minmax(64rem, max-content);

Example

Columns

Use .d-g-cols{n} to create a multi-column layout.

Classes

Class
Output
.d-g-cols1 grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
.d-g-cols2 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
.d-g-cols3 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
.d-g-cols4 grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
.d-g-cols5 grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
.d-g-cols6 grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
.d-g-cols7 grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
.d-g-cols8 grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
.d-g-cols9 grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
.d-g-cols10 grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
.d-g-cols11 grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
.d-g-cols12 grid-template-columns: repeat(12, minmax(0, 1fr)) !important;

Example

Nesting Grids

Unlike some CSS, CSS grid does not cascade beyond the parent and its direct children (parent-element > *). We can use this to our advantage by being able to nest grids within each other without cascade errors.

Layouts documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope