vertical-grid.scss

/* Grid Code */
.page {
  overflow: hidden;
  position: relative;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap; }

.header {
  height: calc(16.66667% - 1.25rem);
  margin-top: 0.625rem;
  margin-bottom: 0.625rem; }

.content {
  height: calc(58.33333% - 1.25rem);
  margin-top: 0.625rem;
  margin-bottom: 0.625rem; }

.footer {
  height: calc(25% - 1.25rem);
  margin-top: 0.625rem;
  margin-bottom: 0.625rem; }

/* Demo Styling */
.page .header, .page .content, .page .footer {
  color: white;
  text-align: center;
  margin: 0px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.page .header {
  background: #37a0e6; }

.page .content {
  background: #1779ba; }

.page .footer {
  background: #0ea29d; }