---
# System prepended metadata

title: Responsive Layout

---


# Responsive Layout 

The website, which is produced with the responsive design logic, is sensitive to the features of the device displayed on and makes itself compatible with that device. Thus, it provides a user experience as if it was designed for that device in terms of usage and appearance, on all devices from phone to desktop computer, from tablet to television.

Plateau Studio offers the following 3 features for you to perform responsive design: **Breakpoint usage, grid-column usage and layout multiplexing**.
 

### Using Breakpoints :
    
There are 5 breakpoints that you can use  in Plateau Studio, located in the layout Style settings tab on the right of Editor. 

<img src="https://stechq.github.io/cdn/documentation/studio/rlgridcolumn.png" width="640" />

Here, you can see the breakpoints illustrated with 5 different devices: Mobile, Tablet, Laptop, Desktop and TV respectively.

* **Mobile breakpoint:** For designing with screen sizes between 0px - 600px to be used on xs sized devices.
* **Tablet breakpoint:** For designing with screen sizes between 600px - 960px to be used on sm sized devices.
* **Laptop breakpoint:** For designing with screen sizes between 960px - 1264px to be used on md sized devices.
* **Desktop breakpoint:** For designing with screen sizes between 1264px - 1904px to be used on lg sized devices.
* **Tv breakpoint:** For designing with screen sizes 1904px and above to be used on xl sized devices.
 
    <img src="https://stechq.github.io/cdn/documentation/studio/responsivelayoutbreakpoints.gif" width="640" />

### Using Grid-Columns :

Plateau Studio provides you the convenience of using grid-columns features. Grid-column settings are located under the breakpoints in the Style settings tab of the VCol component.
* Here, users can choose between 1 and 12 values for how much of the screen will be filled by the VCol component.

    <img src="https://stechq.github.io/cdn/documentation/studio/rlgridcolumn.png" width="640" />
    
* Below that, there are direction options. These options are horizontal and vertical. Horizontal preference applies flex-row, while vertical preference applies flex-column.

    <img src="https://stechq.github.io/cdn/documentation/studio/rloptions.png" width="640" />
    
* There are justify options under direction options.Sets how items in the column are aligned on the horizontal axis. Plateau Studio offers 5 options here.
    * **Start (Justify-Start):** Justify items against the start of the components main axis.
    * **Center (Justify-Center):** Justify items against the center of the components main axis.
    * **End (Justify-End):** Justify items against the end of the components main axis.
    * **Space Between (Justify-Space-Between):** Justify items along the components main axis such that there is an equal amount of space between each item.
    * **Space Around (Justify-Space-Around):** Justify items along the components main axis such that there is an equal amount of space on each side of each item.
    
* Under justify options, there are align options.Sets how items in the column are aligned on the vertical axis. Plateau Studio offers 5 options here.
    * **Start (Align-Start):** Items are positioned at the start of the components vertical axis.
    * **Center (Align-Center):** Items are positioned at the center of the components vertical axis.
    * **End (Align-End):** Items are positioned at the end of the components vertical axis.
    * **Stretch (Align-Stretch):** Stretched to fit the component
    * **Baseline (Align-Baseline):** 

    <img src="https://stechq.github.io/cdn/documentation/studio/responsivelayoutgridcolumns.gif" width="640" />
        
### Layout Multiplexing :
Layout multiplexing feature allows to increase the effect of the use of breakpoints and grid columns mentioned above in your design.

<img src="https://stechq.github.io/cdn/documentation/studio/rlmultiplexing1.png" width="640" />

<img src="https://stechq.github.io/cdn/documentation/studio/rlmultiplexing2.png" width="640" />

With this feature, you can multiply all your settings for certain screen sizes and make them more useful for different situations.

For example, when you want your settings for mobile and tablet to include different preferences for laptop and desktop, you can manage on different devices by multiplexing your layout and arranging all the settings mentioned above.

<img src="https://stechq.github.io/cdn/documentation/studio/responsivelayoutmultiplexing.gif" width="640" />
