Full Width Blocks (https://stackoverflow.com/a/50718406/5846045)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Demo</title>
    <!-- In production, please use a specific UI5 version! -->
    <script defer id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
      data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
      data-sap-ui-theme="sap_horizon"
      data-sap-ui-async="true"
      data-sap-ui-compatversion="edge"
      data-sap-ui-excludejquerycompat="true"
      data-sap-ui-resourceroots='{ "demo": "./" }'
      data-sap-ui-xx-waitfortheme="init"
      data-sap-ui-xx-componentpreload="off"
    ></script>
  </head>
  <body class="sapUiBody">
    <div data-sap-ui-component
      data-id="rootComponentContainer"
      data-name="demo"
      data-height="100%"
      data-settings='{ "id": "rootComponent" }'
    ></div>
  </body>
</html>

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/Device",
  "sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function(UIComponent, Device) {
  "use strict";

  return UIComponent.extend("demo.Component", {
    metadata: {
      interfaces: [
        "sap.ui.core.IAsyncContentCreation",
      ],
      manifest: "json",
    },

    init: function () {
      UIComponent.prototype.init.apply(this, arguments);
      this.setDensity().getRouter().initialize();
    },

    setDensity: function ({
      styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
      targetElement = document.body,
    } = {}) {
      targetElement.classList.add(styleClass);
      return this;
    },

  });
});

{
  "_version": "1.48.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "Demo",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.98.0",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.uxap": {},
        "sap.ui.layout": {},
        "sap.ui.unified": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "resources": {
      "css": []
    },
    "models": {},
    "rootView": {
      "viewName": "demo.view.App",
      "id": "rootView",
      "type": "XML",
      "async": true
    },
    "routing": {
      "routes": [
        {
        "name": "home",
        "pattern": "",
        "target": "home"
        }
      ],
      "targets": {
        "home": {
          "id": "homeView",
          "name": "Home",
          "transition": "fade",
          "level": 1
        },
        "notFound": {
          "name": "Home",
          "transition": "slide",
          "level": 98
        }
      },
      "config": {
        "async": true,
        "routerClass": "sap.m.routing.Router",
        "type": "View",
        "viewType": "XML",
        "path": "demo.view",
        "controlId": "rootApp",
        "controlAggregation": "pages",
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        },
        "homeRoute": "home"
      }
    }
  }
}

<mvc:View
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true"
  height="100%"
>
  <App id="rootApp" autoFocus="false">
    <pages>
      <!-- will be added by the router -->
    </pages>
  </App>
</mvc:View>

<mvc:View xmlns:mvc="sap.ui.core.mvc">
  <ObjectPageLayout xmlns="sap.uxap"
    enableLazyLoading="true"
    upperCaseAnchorBar="false"
  >
    <headerTitle>
      <ObjectPageHeader objectTitle="Block Columns"/>
    </headerTitle>
    <sections>
      <ObjectPageSection
        title="Section_A"
        titleUppercase="false"
      >
        <ObjectPageSubSection id="subSection" xmlns:block="demo.block">
          <block:MyBlock id="block_A" columnLayout="4"/>
          <block:MyBlock id="block_B" columnLayout="4"/>
        </ObjectPageSubSection>
      </ObjectPageSection>
    </sections>
  </ObjectPageLayout>
</mvc:View>

<mvc:View xmlns:mvc="sap.ui.core.mvc">
  <Panel id="myPanel" xmlns="sap.m"
    class="sapUxAPObjectPageSubSectionAlignContent"
    width="auto"
    expandable="true"
    expanded="true"
    headerText="Panel"
  >
    <Text text="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat" />
  </Panel>
</mvc:View>

/**
* Documentation:
*   "Object Page Layout" - https://ui5.sap.com/#/topic/2e61ab6c68a2480eb666c1927a707658
*   "Object Page Blocks" - https://ui5.sap.com/#/topic/4527729576cb4a4888275b6935aad03a
*   "Creating Blocks" - https://ui5.sap.com/#/topic/2978f6064742456ebed31c5ccf4d051d
*/

sap.ui.define([
  "sap/uxap/BlockBase",
], function(BlockBase) {
  "use strict";

  /**
   * ObjectPageLayout assumes the following modes to be available:
   * - "Collapsed"
   * - "Expanded"
   */
  return BlockBase.extend("demo.block.MyBlock", {
    // block views are loaded always asynchronously.
    // See https://github.com/SAP/openui5/issues/2311#issuecomment-492621706
    metadata: {
      views: {
        "Collapsed": {
          viewName: "demo.view.MyBlockCollapsed",
          type: "XML", 
        },
        // ...
      },
    },
  });
});