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.

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.

<xmp><div class="container"><header>
    <!-- Header --></header>
<nav>
    <!-- Nav Bar --></nav>
<main>
    <!-- Main Content --></main>
<aside>
    <!-- Sidebar --></aside>
<footer>
    <!-- Footer --></footer></div>
</xmp>

Let's just have a glance at the CSS components that we utilized to make the Holy Grid layout with CSS Grid.

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

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.

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

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.

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

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.

<xmp><header><h2>Angular CSS Grid</h2></header>
</xmp>

In the app/nav/nav.component.html file, insert the following code. In Angular, the routerLink=”” directive makes the routes clickable.

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

In the app/aside/aside.component.html file, insert the following code.

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

In the app/footer/footer.component.html file, insert the following code.

<xmp><footer>
  <span>
      @Copyright 2020-2021
  </span></footer>
</xmp>

Insert the following code in the main/main.component.html file.

<xmp><main><p>
      Main content part.</p></main>
</xmp>

Want to Hire Genuine AngularJS Development Company? Your Search ends here.

After that, inside the styles.css file, add the final CSS code.

<xmp>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:
    &quot;header header header&quot;
    &quot;nav content side&quot;
    &quot;footer footer footer&quot;;
    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:
        &quot;header&quot;
        &quot;nav&quot;
        &quot;content&quot;
        &quot;side&quot;
        &quot;footer&quot;;
      grid-template-rows:auto minmax(60px, auto) 1fr minmax(70px, auto) auto;
    }
}

</xmp>

The finished app.module.ts file can be seen here.

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

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.