Menu Menu
v5.21.0 GitHub Repo Codepen Template

Grids

CSS grids are a two-dimensional layout tool that allow you to place items within columns and rows at the same time, unlike Flexbox which is a one-dimensional layout tool.

In the past CSS grid systems based on Flexbox required a number of CSS classes to achieve two-dimensional layouts. With the introduction of CSS grids, that is no longer needed. Most grid layouts can be generated quickly using CSS within your Less. Also CSS grids are highly specific to the content placed within it. That said, there are a few common layouts and grid helpers that Dialtone provides to help you as you're laying out content.

Grid Layouts

These layout classes cover many of the common layouts seen throughout Dialpad and UberConference. Instead of using Less variables (@variable) within these classes (which locks the value into the CSS), these layouts use CSS variables (var(--variable)). Using CSS variables allows items to change dynamically on a page without needing to add or remove a class name. This is especially helpful with responsive designs, allowing us to adjust column totals, widths, heights, etc based on viewport height or width without needing to write more CSS.

CSS Variables

CSS Variable Output
--grid-sidebar-col minmax(19.2rem, 38.4rem)
--grid-content-col minmax(min-content, 128rem)
--grid-header-row minmax(12.8rem, min-content)
--grid-content-row minmax(51.2rem, max-content)
--grid-col 12
--grid-col-width minmax(min-content, 25.6rem)
--grid-auto-col 1fr

Classes

Class Output
.d-grid-layout--with-columns grid-template-columns: var(--grid-template-col);
grid-auto-columns: var(--grid-auto-col);
.d-grid-layout--with-sidebar-content grid-template-areas: "sidebar content";
grid-template-columns: [sidebar-start] var(--grid-sidebar-col) [sidebar-end content-start] var(--grid-content-col) [content-end];
.d-grid-layout--with-header-content grid-template-areas: "header content";
grid-template-rows: [header-start] var(--grid-header-row) [header-end content-start] var(--grid-content-row) [content-end];
grid-auto-rows: 1fr;
grid-auto-columns: minmax(min-content, auto);

Examples

With columns

[col]
[col]
[col]
[col]
[col]
<div class=".d-grid-layout--with-columns" style="--grid-col: 5;">...</div>

With sidebar

[sidebar]
[content]
<div class=".d-grid-layout--with-sidebar-content">...</div>

With header

[header]
[content]
<div class=".d-grid-layout--with-header-content">...</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.

[col]
[col]
[col]
<div class="d-grid-layout--with-columns" style="--grid-template-col: 3fr 1fr;">
    <div class="d-grid-layout--with-columns" style="--grid-template-col: 1fr 1fr;">
        <div>…</div>
        <div>…</div>
    </div>
    <div>…</div>
</div>

Column Spans

Have an element span multiple columns by using .d-grid-column--span{#} classes.

[span1]
[span2]
[span3]
[span4]
[span5]
[span6]
[span7]
[span8]
[span9]
[span10]
[span11]
[span12]
<div class="d-grid-column--span1">…</div>
<div class="d-grid-column--span2">…</div>
<div class="d-grid-column--span3">…</div>
<div class="d-grid-column--span4">…</div>
<div class="d-grid-column--span5">…</div>
<div class="d-grid-column--span6">…</div>
<div class="d-grid-column--span7">…</div>
<div class="d-grid-column--span8">…</div>
<div class="d-grid-column--span9">…</div>
<div class="d-grid-column--span10">…</div>
<div class="d-grid-column--span11">…</div>
<div class="d-grid-column--span12">…</div>

Gutters

Grid gutters, or gaps, can be applied universally (columns and rows), column gutters only, or row gutters only. Dialtone's gutter sizes are based on spacing units. To add a gutter, use one of the .d-grid-gap{#} classes below.

Classes

Class Direction Size Output
.d-grid-gap0 Columns & Rows 0px grid-gap: 0
.d-grid-gap1 Columns & Rows 1px grid-gap: .1rem
.d-grid-gap2 Columns & Rows 2px grid-gap: .2rem
.d-grid-gap4 Columns & Rows 4px grid-gap: .4rem
.d-grid-gap6 Columns & Rows 6px grid-gap: .6rem
.d-grid-gap8 Columns & Rows 8px grid-gap: .8rem
.d-grid-gap12 Columns & Rows 12px grid-gap: 1.2rem
.d-grid-gap16 Columns & Rows 16px grid-gap: 1.6rem
.d-grid-gap24 Columns & Rows 24px grid-gap: 2.4rem
.d-grid-gap32 Columns & Rows 32px grid-gap: 3.2rem
.d-grid-gap48 Columns & Rows 48px grid-gap: 4.8rem
.d-grid-gap64 Columns & Rows 64px grid-gap: 6.4rem
.d-grid-column-gap0 Column 0px grid-column-gap: 0
.d-grid-column-gap1 Column 1px grid-column-gap: .1rem
.d-grid-column-gap2 Column 2px grid-column-gap: .2rem
.d-grid-column-gap4 Column 4px grid-column-gap: .4rem
.d-grid-column-gap6 Column 6px grid-column-gap: .6rem
.d-grid-column-gap8 Column 8px grid-column-gap: .8rem
.d-grid-column-gap12 Column 12px grid-column-gap: 1.2rem
.d-grid-column-gap16 Column 16px grid-column-gap: 1.6rem
.d-grid-column-gap24 Column 24px grid-column-gap: 2.4rem
.d-grid-column-gap32 Column 32px grid-column-gap: 3.2rem
.d-grid-column-gap48 Column 48px grid-column-gap: 4.8rem
.d-grid-column-gap64 Column 64px grid-column-gap: 6.4rem
.d-grid-row-gap0 Row 0px grid-row-gap: 0
.d-grid-row-gap1 Row 1px grid-row-gap: .1rem
.d-grid-row-gap2 Row 2px grid-row-gap: .2rem
.d-grid-row-gap4 Row 4px grid-row-gap: .4rem
.d-grid-row-gap6 Row 6px grid-row-gap: .6rem
.d-grid-row-gap8 Row 8px grid-row-gap: .8rem
.d-grid-row-gap12 Row 12px grid-row-gap: 1.2rem
.d-grid-row-gap16 Row 16px grid-row-gap: 1.6rem
.d-grid-row-gap24 Row 24px grid-row-gap: 2.4rem
.d-grid-row-gap32 Row 32px grid-row-gap: 3.2rem
.d-grid-row-gap48 Row 48px grid-row-gap: 4.8rem
.d-grid-row-gap64 Row 64px grid-row-gap: 6.4rem

Examples

Columns & Rows

[gap16]
[gap16]
[gap16]
[gap16]
<div class="d-grid-layout--with-columns d-grid-gap16" style="--grid-col: 2;">
    <div>…</div>
    <div>…</div>
    <div>…</div>
    <div>…</div>
</div>

Columns

[column-gap16]
[column-gap16]
[column-gap16]
[column-gap16]
<div class="d-grid-layout--with-columns d-grid-column-gap16" style="--grid-col: 2;">
    <div>…</div>
    <div>…</div>
    <div>…</div>
    <div>…</div>
</div>

Rows

[row-gap16]
[row-gap16]
[row-gap16]
[row-gap16]
<div class="d-grid-layout--with-columns d-grid-row-gap16" style="--grid-col: 2;">
    <div>…</div>
    <div>…</div>
    <div>…</div>
    <div>…</div>
</div>

Resources

CSS Grids are a powerful layout tool, though albeit a different way of approaching layout. Unlike previous one-dimensional methods, CSS grids allow us to place content two-dimensionally (across rows and columns). To better understand grid, the following resources are a great help: