DroneDeploy
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!
Last modified 3yr ago
Copy link