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 

<div class="d-d-grid d-g16 d-gl-sidebar">
  <div class="d-ga-sidebar">...</div>
  <div class="d-ga-content">...</div>
</div>

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 

<div class="d-d-grid d-g16 d-gl-sidebar">
  <div class="d-ga-sidebar">...</div>
  <div class="d-ga-content">
    <div class="d-d-grid d-g16 d-gl-header">
      <div class="d-ga-header">...</div>
      <div class="d-ga-content">...</div>
    </div>
  </div>
</div>

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 

<div class="d-d-grid d-g16 d-g-cols4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

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.

<div class="d-d-grid d-g16 d-g-cols2">
  <div>1</div>
  <div class="d-d-grid d-g16 d-g-cols2">
    <div>3</div>
    <div>4</div>
  </div>
</div>
Layouts documentation last updated Thursday, June 11, 2026