Build CSS3 Flexbox Holy Grail Layout in Angular 15

Holy Grail layout is a typical layout pattern refers to a web page.

It has equal height columns with a fixed header and footer, and a contains three columns left side nav (navigation), main content (primary content block) and right side sidebar (ads or other content).

CSS Grid vs Flexbox

Holy Grill layout can be developed with CSS Grid layout and popular CSS3 Flexbox method.

In this tutorial, we will use the Flexbox method to develop Holy Grill layout in Angular.

Check out following tutorial to Create Holy Grail Layout in Angular with CSS Grid method.

CSS3 Flexbox Example

Flexbox is a web layout model which helps in aligning and distributing the space automatically inside a container with the help of CSS3 properties. Due to higher flexibility, Flexbox method helps in designing a responsive web page without using the float, position properties.

Its a great tool for Angular, React and front-end developers to design web apps easily, we have following reasons to use:

• Wide mobile and desktop browser’s support
• Building repeatable components is easy
• Supports media queries for responsive layout
• Reverse or rearrange elements easily with the order property
• Easily center elements

Flexbox HTML Structure

To get started with Flexbox, we need to use the below HTML structure. Following HTML elements will lay the foundation for flexible boxes. We used a parent div with container class, and inside this, we placed header, nav, main, aside and footer.

<div class="container">
  <header>
    <!-- Header -->
  </header>
  <nav>
    <!-- Left Nav -->
  </nav>
    <main>
    <!-- Main content -->
  </main>
  <aside>
    <!-- Right Sidebar -->
  </aside>
  <footer>
    <!-- Footer -->
  </footer>
</div>

To make the child elements flexible inside a parent element, we used the display: flex value to the parent container class.

By setting up shorthand “flex-flow: row wrap” property, we are assigning the flex-direction and flex-wrap properties to the container class.

.container {
  display:flex;
  flex-flow:row wrap;
}

The order property assign the order of the element inside a flexbox, for instance, the header has the order: 1, whereas nav (order: 2), main (order: 3), aside (order: 4) and footer(order: 5).

The flex property is a shorthand property, and it refers to the flex-grow, flex-shrink, and flex-basis properties for the flexible element. For example, the header is set to flex: 0 1 100%.

header {
  order:1;
  height:100px;
  flex:0 1 100%;
}
nav {
  order:2;
  flex: 0 1 200px;
}
main {
  order:3;
  flex: 1;
  min-height:500px;
}
aside {
  order:4;
  flex:0 1 200px;
}
footer {
  order:5;
  height:100px;
  flex:0 1 100%;
}

The flexible boxes will look something like this:

Install Angular Project

Install and Angular project using the below command.

ng new angular-holy-grail-flexbox

Get inside the project.

cd angular-holy-grail-flexbox

Create Angular Components

To set up a Holy Grail Flexbox layout we need to create the following components.

• Header
• Left Side Nav
• Main Content
• Right Sidebar
• Footer

To formulate the routes, we need components, here is the command that can generate components dynamically.

Run the command to generate the components.

ng g c header
ng g c nav
ng g c main
ng g c aside
ng g c footer
ng g c privacy-policy

Enable Routes

Now, Insert the HTML inside the Angular components.

First, go to app-routing.component.ts file and add the following code.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main/main.component';
import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';
const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', component: MainComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Add home and privacy policy components in the app-routing.module.ts file. It enables the home and privacy-policy routes in the app.

Next, head over to the app.component.html file and include the header, nav, main, privacy policy, aside and footer tags.

<div class="container">
  <app-header></app-header>
  <app-nav></app-nav>
  <router-outlet></router-outlet>
  <app-aside></app-aside>
  <app-footer></app-footer>
</div>

Configure CSS3 Flexbox Layout in Angular

The header, footer and nav Angular components will deliver the same content between home and privacy policy pages.

Add the HTML code inside the header, nav, aside and footer Angular components.

Add following code in app/header/header.component.html file.

<header>
    <h2>Angular Holy Grill Layout with CSS Grid</h2>
</header>

Include the given code in app/nav/nav.component.html file.

<nav>
    <ul>
        <li><a routerLink="/home">Home</a></li>
        <li><a routerLink="/privacy-policy">Privacy Policy</a></li>
    </ul>
</nav>

Place the following code in app/aside/aside.component.html file.

<aside>
    <h3>Sidebar</h3>
</aside>

Insert the given code in app/footer/footer.component.html file.

<footer>
    <span>
        Copyright 2019-2020
    </span>
</footer>

Now, in main/main.component.html file place the given below code.

<main>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nullam dolor velit, suscipit vel ultricies id, ultrices in
        augue. Aliquam volutpat, nunc id pulvinar tincidunt, leo nunc
        feugiat libero, quis luctus lectus ipsum et enim.
    </p>
</main>

In app-privacy-policy.component.html file insert the following code.

<main>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nullam dolor velit, suscipit vel ultricies id, ultrices
        augue. Aliquam volutpat, nunc id pulvinar tincidunt, leo nunc feugiat libero, quis luctus lectus ipsum et enim.
        Suspendisse potenti. Nullam ultricies congue magna non mattis. Cras enim velit, gravida in sem id, malesuada
        efficitur augue. Vivamus ullamcorper tincidunt tempus.
    </p>
</main>

Angular Flexbox Layout CSS

Here is the final Flexbox CSS of this project to build a holy grail layout.styles.scss file.

/* 
// CSS3 Flexbox Holy Grail Layout
// Made with ❤ by @ImDigamberSingh
// https://www.positronx.io
*/
* {
  box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: sans-serif;
}
.container {
  display:flex;
  flex-flow:row wrap;
}
app-header, 
app-nav, 
app-main, 
app-aside, 
app-footer {
  padding: 20px;
  margin:5px;
}
app-header {
  order:1;
  height:100px;
  flex:0 1 100%;
  background: #f1b5b5;
}
app-nav {
  order:2;
  flex: 0 1 200px;
  background: rgb(176, 165, 199);
}
app-main,
app-privacy-policy {
  order:3;
  flex: 1;
  min-height:500px;
  background: rgb(211, 216, 215);
}
app-aside {
  order:4;
  flex:0 1 200px;
  background: rgb(149, 180, 216);
}
app-footer {
  order:5;
  height:100px;
  flex:0 1 100%;
  background: rgb(119, 120, 121);
}

Here is our final app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { NavComponent } from './nav/nav.component';
import { MainComponent } from './main/main.component';
import { AsideComponent } from './aside/aside.component';
import { FooterComponent } from './footer/footer.component';
import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';
import { AppRoutingModule } from './app-routing.component';
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    NavComponent,
    MainComponent,
    AsideComponent,
    FooterComponent,
    PrivacyPolicyComponent,
  ],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Make Flexbox Responsive in Angular

Setting up responsive feature in Flexbox Holy Grid layout is so simple. As you can see we used the flex: unset and width: 100% properties to make the HTML elements responsive inside a flexbox container.

@media (max-width: 768px) {
  app-header, 
  app-nav, 
  app-main, 
  app-aside, 
  app-footer {
    flex: unset;
    width: 100%;
  }
}

Run the project on the browser, run the below command.

ng serve --open

Conclusion

We have completed the Angular UI tutorial in which we learned how to build Flexbox Holy Grail Layout with the help of modern CSS3 properties.