Skip to content
STYLESCAPE

Viewport Grid

Examples for the ss-l-viewport-grid layout: equal views for multi-camera, multi-map and comparison pages. It fills its parent (give that a height, e.g. an ss-l-app__main--bleed); each __cell is a positioned, clipped container for a canvas or map and for ss-c-overlay-panels. Cells are separated by --ss-viewport-grid-gap (a 1 px hairline by default). Below md every layout stacks into one column of cells at least --ss-viewport-grid-min tall.

Two side by side (--2h) and stacked (--2v)

Before
After
Map
Elevation profile
HTML 
<div style="height: 200px">
            <div class="ss-l-viewport-grid ss-l-viewport-grid--2h">
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Before</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">After</span></div>
            </div>
        </div>
        <div style="height: 240px; margin-top: var(--ss-space-4)">
            <div class="ss-l-viewport-grid ss-l-viewport-grid--2v">
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Map</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Elevation profile</span></div>
            </div>
        </div>

Four views (--2x2)

Top
Front
Side
Perspective
HTML 
<div style="height: 320px">
            <div class="ss-l-viewport-grid ss-l-viewport-grid--2x2">
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Top</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Front</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Side</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Perspective</span></div>
            </div>
        </div>

One large and three small (--1-3, --1-3-side)

The first cell is the large one.

Camera 1
Camera 2
Camera 3
Camera 4
Main map
Zoom 12
2019
2021
2023
HTML 
<div style="height: 320px">
            <div class="ss-l-viewport-grid ss-l-viewport-grid--1-3">
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 1</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 2</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 3</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 4</span></div>
            </div>
        </div>
        <div style="height: 320px; margin-top: var(--ss-space-4)">
            <div class="ss-l-viewport-grid ss-l-viewport-grid--1-3-side">
                <div class="ss-l-viewport-grid__cell">
                    <span class="ss-l-viewport-grid__label ss-t-text-xs">Main map</span>
                    <div class="ss-c-overlay-panel ss-c-overlay-panel--bottom-right">Zoom 12</div>
                </div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">2019</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">2021</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">2023</span></div>
            </div>
        </div>

One large and four small (--1-4, --1-4-side)

Model
Top
Front
Side
Section
Main map
2017
2019
2021
2023
HTML 
<div style="height: 320px">
            <div class="ss-l-viewport-grid ss-l-viewport-grid--1-4">
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Model</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Top</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Front</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Side</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Section</span></div>
            </div>
        </div>
        <div style="height: 320px; margin-top: var(--ss-space-4)">
            <div class="ss-l-viewport-grid ss-l-viewport-grid--1-4-side">
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Main map</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">2017</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">2019</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">2021</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">2023</span></div>
            </div>
        </div>

Six views (--3x2, --2x3)

Camera 1
Camera 2
Camera 3
Camera 4
Camera 5
Camera 6
Camera 1
Camera 2
Camera 3
Camera 4
Camera 5
Camera 6
HTML 
<div style="height: 320px">
            <div class="ss-l-viewport-grid ss-l-viewport-grid--3x2">
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 1</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 2</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 3</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 4</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 5</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 6</span></div>
            </div>
        </div>
        <div style="height: 480px; margin-top: var(--ss-space-4)">
            <div class="ss-l-viewport-grid ss-l-viewport-grid--2x3">
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 1</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 2</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 3</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 4</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 5</span></div>
                <div class="ss-l-viewport-grid__cell"><span class="ss-l-viewport-grid__label ss-t-text-xs">Camera 6</span></div>
            </div>
        </div>