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-gg16 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-gg16 d-gl-sidebar">
<div class="d-ga-sidebar">...</div>
<div class="d-ga-content">
<div class="d-d-grid d-gg16 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-gg16 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-gg16 d-g-cols2">
<div>1</div>
<div class="d-d-grid d-gg16 d-g-cols2">
<div>3</div>
<div>4</div>
</div>
</div>