Side Panel Grid

Search…

Side Panel Grid

Grid Structure
Our grid includes a flexbox grid with a 4-column layout. The width of the grid is a fixed value.
This is how the grid works:
Containers allow you to center your content within DroneDeploy's app side panel. It also keeps all your code within scope of the container.
Rows are placed inside a container. Rows allow you to align content horizontally. 
Columns are placed inside a row. Columns allow you to set the number of columns that will compose your layout within a row. 
The grid is composed of three major components a container > row > 4 columns.
4 Column Grid
Here is an example of how you would structure 4 columns within within a row on your HTML.
1
<div class="container">
2
  <div class="row">
3
    <div class="col-1">1</div>
4
    <div class="col-1">2</div>
5
    <div class="col-1">3</div>
6
    <div class="col-1">4</div>
7
  </div>
8
</div>
Copied!
Layouts with Diverse Column Widths
Example of structuring your HTML to create rows with diverse column widths.
1
<div class="container">
2
​
3
  <div class="row">
4
    <div class="col-4"><div> is 4 columns wide</div>
5
  </div>
6
​
7
  <div class="row">
8
    <div class="col-2">2 columns</div>
9
    <div class="col-2">2 columns</div>
10
  </div>
11
</div>
Copied!

Document Setup

Typography

Last modified 2yr ago

Copy link

Contents

Grid Structure

4 Column Grid

Layouts with Diverse Column Widths