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
<div class=".d-grid-layout--with-columns" style="--grid-col: 5;">...</div>
With sidebar
<div class=".d-grid-layout--with-sidebar-content">...</div>
With header
<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.
<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.
<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
<div class="d-grid-layout--with-columns d-grid-gap16" style="--grid-col: 2;">
<div>…</div>
<div>…</div>
<div>…</div>
<div>…</div>
</div>
Columns
<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
<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:
- CSS Grid Layout - Rachel Andrew (Video, Frontend NE, Feb 2017)
- Grid by Example by Rachel Andrew (Resource)
- CSS Tricks: A Complete Guide to Grid (Article)
- CSS Grid Course (25 videos) by Wes Bos (Video)
- 24 Ways: Design Systems and CSS Grid by Stuart Robson (Article, Dec 12 2017)