An ultimate guide on how to use CSS Grid with Angular

Introduction

---

Holy Grail is a web page user interface layout pattern. The header, main content section, left side fixed-width nav block, middle content section, fixed sidebar, and the footer at the bottom are among the UI components.

[Holy Grail UI]

It may be created using a variety of techniques, including CSS Grid and the incredibly popular CSS Flex-box method. In this article, we'll use Angular to create the Holy Grail layout 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;
  }

 ng new angular-css-grid

# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? CSS

Cd  angular-css-grid 

ng serve --open

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 

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 { }

Angular CSS Grid

      Main content part.

      privacy policy part

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: #a5282898;
  }
  
  app-nav {
    grid-area: nav;
    margin-left: 0.6rem;
    background-color: #167299a4;
  }
  
  app-privacy-policy,
  app-main {
    grid-area: content;
    background-color: #89ebbd70;
    padding: 25px;
  }
  
  app-aside {
    grid-area: side;
    margin-right: 0.6rem;
    background-color: #167299a4;
  }
  
  app-footer {
    grid-area: footer;
    background-color:#2ca159c2;
    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;
  }
@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;
    }
}

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 { }

An ultimate guide on how to use CSS Grid with Angular Table of Content 1. Introduction 2. Understand CSS Grid Layout 3. Benefits of CSS Grid Layout in Angular 4. Create CSS Grid Structure with Rows and Columns 5. Build Angular Project 6. Generate Angular Components 7. Set up the Routes 8. Set up the Holy Grail Layout 9. Conclusion Introduction Holy Grail is a web page user interface layout pattern. The header, main content section, left side fixed-width nav block, middle content section, fixed sidebar, and the footer at the bottom are among the UI components. [Holy Grail UI] It may be created using a variety of techniques, including CSS Grid and the incredibly popular CSS Flex-box method. In this article, we'll use Angular to create the Holy Grail layout using CSS Grid. Understand CSS Grid Layout Columns and rows are used in a CSS Grid Layout, and horizontal and vertical lines cross each other. This point of intersection creates a flexible arrangement on which items can be arranged in a logical order. To create a web page, a grid-based layout method eliminates the need for floats and position values. This is the most appropriate and straightforward method for creating a UI layout in Angular. It also works with the most recent browsers, including Chrome, Safari, Firefox, and Edge. Benefits of CSS Grid Layout in Angular Optimal Alignment Support for the most popular browsers Simple item placement track sizes that can be changed Cross-protection of content Additional tracks are being created to organize content So far, we've covered a basic overview of Holy Grill and CSS Grid layout. Then, with the help of HTML and current CSS, quickly develop a responsive Holy Grill layout in Angular 12 using CSS Grid. Creating a flexible layout in Angular 12 was previously a challenge, but because of the introduction of the CSS Grid system, developing a responsive layout has become surprisingly straightforward. In Angular, making the layout responsive takes less code and time. Create CSS Grid Structure with Rows and Columns Grid-template-rows and grid-template-columns CSS attributes can be used to create a CSS grid with rows and columns. To begin with the grid structure, we must first comprehend its simple structure. It consists of a layout, responsive one or more child components. Let's just have a glance at the CSS components that we utilized to make the Holy Grid layout with 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; } By changing the display property to grid, we can turn a div container into a grid. grid-template-columns and grid-template-rows are grid-template-columns and grid-template-rows, respectively. CSS3 properties are utilized to create a grid container class template. Read More: A Complete Guide On Ngrx Store Architecture Using Angular We use the grid-gap attribute and a 12px gap between the grid row and columns to add gaping. The grid-template-areas are a collection of grid-template-areas. Within the CSS grid layout, the designated grid regions CSS property defines. In our grid layout, the height: 100vh gives the container 100 percent viewport height. We also set the height of the middle row to 1fr, and it will add extra space as needed. Build Angular Project Install and configure a basic Angular project using the following command to build up a Holy Grill layout inside an Angular app. ng new angular-css-grid # ? Would you like to add Angular routing? Yes # ? Which stylesheet format would you like to use? CSS Get Inside the Project Cd angular-css-grid Run the following command in the terminal to get the project started. ng serve --open Generate Angular Components To make a Holy Grail Layout,we will need to include the following components. Header Left Side Nav Main Content Right Sidebar Footer We must now create 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 Set up the Routes Now that the components have been generated, it's time to add the Holy Grill layout to the Angular 12 components using CSS Grid. To begin, add the following code to the app-routing.component.ts file. 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 components for the home and privacy policy in the app-routing.module.ts file. The Urls in Angular CSS Grid app gets configured, and generated when the Angular app was installed and asked, "Would you like to add Angular routing?" Add the header, nav, main, privacy policy, aside, and footer selectors to the app.component.html file. Set up the Holy Grail Layout The header, footer, and nav components in the Angular holy grail layout will serve the same text on the home and privacy policy pages. To begin, add HTML to the header, nav, and footer components. In the app/header/header.component.html file, insert the following code. Angular CSS Grid In the app/nav/nav.component.html file, insert the following code. In Angular, the routerLink=”” directive makes the routes clickable.  Home Privacy Policy  In the app/aside/aside.component.html file, insert the following code. Sidebar In the app/footer/footer.component.html file, insert the following code. @Copyright 2020-2021 Insert the following code in the main/main.component.html file. Main content part. Include the following code in the app-privacy-policy.component.html file. privacy policy part Want to Hire Genuine AngularJS Development Company ? CONTACT US After that, inside the styles.css file, add the final CSS code. 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: #a5282898; } app-nav { grid-area: nav; margin-left: 0.6rem; background-color: #167299a4; } app-privacy-policy, app-main { grid-area: content; background-color: #89ebbd70; padding: 25px; } app-aside { grid-area: side; margin-right: 0.6rem; background-color: #167299a4; } app-footer { grid-area: footer; background-color:#2ca159c2; 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; } @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; } } The finished app.module.ts file can be seen here. 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 { } Conclusion In this blog, we've explored the core elements of CSS Grid layout and how to utilize it to create modern layouts for Angular developers. Finally, using the Holy Grill UI design, we constructed an Angular 12 CSS Grid layout.

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Technical Content Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.