CSS Grid Layout – Holy Grail Angular 16 UI Tutorial

Angular 16 CSS grid layout tutorial; In this profound post, we will learn to how create and use CSS Grid layout within the Angular application using the Holy Grail layout pattern.Holy Grail is a user interface layout pattern for the web pages. It comprises of the following UI components such as: header, main content section, left side fixed-width nav block, middle content section, fixed sidebar and a footer at the bottom.

It can be built using various methods, CSS Grid and remarkably popular CSS Flexbox method. In this tutorial, we will build the Holy Grail layout using CSS Grid in Angular.

You can view the live demo of Angular CSS grid layout, let’s see how does CSS grid look in Chrome and Firefox browsers.

Understand CSS Grid Layout

A CSS Grid layout is based on columns and rows, horizontal and vertical lines cross each other.

This intersection forms a flexible layout on which elements can be organised systematically. A grid-based layout system doesn’t require floats and position properties to build a web page.

This method is the most suitable and easy way to build a UI layout in Angular. Furthermore, it supports nearly all the newest browsers such as chrome, safari, firefox and Edge.

CSS Grid Layout Benefits in Angular

• Perfect Alignment
• Major browser support
• Easy item arrangement
• Adjustable track sizes
• Content overlapping protection
• Formulation of additional tracks to manage content

So far, we have given the brief introduction to Holy Grill and CSS Grid layout. Next, we will efficiently create a responsive Holy Grill layout in Angular using CSS Grid with the help of HTML and modern CSS.

Previously creating a responsive layout in Angular was an absolute headache luckily since the commencement of the CSS Grid system designing a responsive layout became remarkably simple.

It requires less code and time to make the layout responsive in Angular.

Create CSS Grid Structure with Rows and Columns

A CSS grid has rows and columns and it can be set using grid-template-rows and grid-template-columns CSS properties. To get started with the grid layout, we need to understand It’s basic structure. It has a parent element followed by single or multiple child elements.

<div class="container">
  <header>
    <!-- Header -->
  </header>

  <nav>
    <!-- Nav Bar -->
  </nav>

  <main>
    <!-- Main Content -->
  </main>

  <aside>
    <!-- Sidebar -->
  </aside>

  <footer>
    <!-- Footer -->
  </footer>
</div>

Let’s understand the following CSS elements, that we used to create the Holy Grid layout with using CSS Grid.

.container {
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    grid-template-rows: auto 1fr auto;
    grid-gap: 12px;
    grid-template-areas:
    "header header header"
    "nav content side"
    "footer footer footer";
    height: 100vh;
}

• We are converting div container into a grid, by setting up the display property to grid.
• The grid-template-columns and grid-template-rows CSS3 properties are used here to generate a template for grid container class.
• To add gapping between the grid row and columns, we are using grid-gap property and adding 12px of a gap.
• The grid-template-areas CSS property defines named grid areas inside the CSS grid layout.
• The height: 100vh is providing 100% viewport height to the container in our grid layout. We also defined the height 1fr to the middle row, and It will add the extra space when required.

Build Angular Project

To set up a Holy Grill layout inside and Angular app, Install and configure a basic Angular project using the following command.

ng new angular-css-grid

Get inside the project.

cd angular-css-grid

Generate Angular Components

To create a Holy Grail layout we need to place the following components in our layout.

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

Now, we need to generate the Angular 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

Configure Routes

Now, we have created the components, and It’s time to insert the Holy Grill layout in Angular components with CSS Grid.

First, go to app-routing.module.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 { }

Include home and privacy policy components inside the app-routing.module.ts file. It configures the url in our Angular CSS Grid app, and it generated when asked, “Would you like to add Angular routing?” when the Angular app was being installed.

Next, go to the app.component.html file and add the header, nav, main, privacy policy, aside and footer selectors.

<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 Holy Grail Layout

In Angular holy grail layout header, footer and nav components will deliver the equivalent content amongst home and privacy policy pages.

First, let’s insert HTML in header, aside, nav and footer components.

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

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

Place the following code in app/nav/nav.component.html file. The routerLink=”” directive makes the routes clickable in Angular.

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

Insert following code in app/aside/aside.component.html file.

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

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

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

Now, main/main.component.html file and insert the following 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>

Now, privacy-policy.component.html file and include 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>

Next, add the final CSS code inside the styles.css file.

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #E4F0FF;
}

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-gap: 12px;
    grid-template-areas:
    "header header header"
    "nav content side"
    "footer footer footer";
    height: 100vh;
  }

app-header {
    color: white;
    font-size: 14px;
    grid-area: header;
    text-align: center;
    background-color: #FA7D44;
  }
  
  app-nav {
    grid-area: nav;
    margin-left: 0.6rem;
    background-color: #2A92BF;
  }
  
  app-privacy-policy,
  app-main {
    grid-area: content;
    background-color: #F4CE46;
    padding: 25px;
  }
  
  app-aside {
    grid-area: side;
    margin-right: 0.6rem;
    background-color: #2A92BF;
  }
  
  app-footer {
    grid-area: footer;
    background-color:#2BB961;
    color: white;
    text-align: center;
    padding: 25px 0;
  }

  ul li {
    color: white;
  }
  ul li a {
    color: white;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 15px;
  }

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.module';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    NavComponent,
    MainComponent,
    AsideComponent,
    FooterComponent,
    PrivacyPolicyComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Make Responsive CSS Grid Layout in Angular

Making Holy Grid layout responsive is pretty easy with media queries. It requires less CSS properties to make the layout adaptive in smaller devices.

@media (max-width: 991px) {
    app-nav, 
    app-aside {
      margin: 0;
    }

    .container {
      grid-template-columns: 1fr;
      grid-template-areas:
        "header"
        "nav"
        "content"
        "side"
        "footer";
      grid-template-rows:auto minmax(60px, auto) 1fr minmax(70px, auto) auto;
    }
}

Start the project by running the following command in the terminal.

ng serve --open

Conclusion

Finally, we have created Angular CSS Grid layout with Holy Grail UI pattern. I hope you liked this tutorial, please share it with others as well.