fonteva-design-guide/force-app/main/default/lwc/pfmLayout/pfmLayout.js

## Dev, Build and Test

import { LightningElement, api, track } from 'lwc';

export default class Layout extends LightningElement {
    @api expand;

    @track classes;
    @track gridStr;

    @api
    get grid() {
        return this.gridStr;
    }
    set grid(value) {
        this.gridStr = value;
    }

    connectedCallback() {
        const classBase = 'pfm pfm-layout';

        this.gridRatios();

        let valExpand = this.expand,
            valGrid = this.grid;

        let str, grid, expand;

        expand = valExpand ? ' pfm-layout_full' : ' pfm-layout_default';

        str = classBase;

        grid = valGrid ? valGrid : '';

        this.classes = str + expand + grid;
    }
    gridRatios() {
        const str = ' pfm-grid_';

        switch (this.gridSr) {
            case '1:5':
                this.gridSr = str + '1-5';
                break;
            case '5:1':
                this.gridSr = str + '5-1';
                break;
            case '1:4:1':
                this.gridSr = str + '1-4-1';
                break;
            case '2:4:1':
                this.grid = str + '2-4-1';
                break;
            default:
                this.gridSr = '';
        }
    }
}