DroneDeploy
Search…
Introduction
Introduction
Overview
API
Introduction
Authentication
Pagination
Examples
App Platform
Introduction
App SDK
UI Kit
Document Setup
Side Panel Grid
Typography
Forms
Buttons
Preloader
Helpers
Templates
Javascript API
How to publish an App
App Examples
Platform Policy
Authentication
FAQs
Powered By
GitBook
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!
Previous
Document Setup
Next
Typography
Last modified
3yr ago
Copy link
Contents
Grid Structure
4 Column Grid
Layouts with Diverse Column Widths