Add Material Layout Grid In Angular

Introduction:

The most recent design craze in online and app development is called “Material Design.” Google released this new mobile-first design language in 2014, providing a better approach to making stunning apps and webpages that would function on any screen.

A guideline for creating software called Material Design brings together established design tenets with cutting-edge engineering and careful consideration of how users interact with gadgets. In order to ensure a uniform user experience across all Android device types, Google wants to promote material design across all platforms and apps.

The Google team created this web design style in 2014 with a lot of unidentified elements that are typical of Google services. Its primary goal was to standardize website user interfaces across all devices, including tablets and smartphones in addition to PCs. Since that company also created the Android operating system, as you are probably aware, this development has been very beneficial for them.

Get Started:

Step 1: Set up your project.

Go to your desired directory and write the following command to create a new Angular application.

ng new material-layout

After that, install the Angular material for use Material components like buttons, cards, etc. in your application. Remember that it is not compulsory. You can also use the Bootstrap components.

ng add @angular/material

When you add the Angular material then it will be asking you some questions for implementation. You can find the procedures of add Angular material step by step by clicking here.

Finally, install the material layout grid by running this command.

npm install @material/layout-grid

Step 2: Add layout style.

You need to add the material layout style. So, go to your application’s main stylesheet which is Styles.css, and write the following command at the top.

@use "@material/layout-grid/mdc-layout-grid";

Step 3: Add the following HTML in your to your app.component.html

<div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell">
            <mat-card>
                Card 1
            </mat-card>
            <button mat-raised-button color="primary">Button 1</button>
        </div>
        <div class="mdc-layout-grid__cell">
            <mat-card>
                Card 2
            </mat-card>
            <button mat-raised-button color="primary">Button 2</button>
        </div>
        <div class="mdc-layout-grid__cell">
            <mat-card>
                Card 3
            </mat-card>
            <button mat-raised-button color="primary">Button 3</button>
        </div>
    </div>
</div>

Explanation:

The responsive user interface for Material Design is built around a column-variate grid layout. On a desktop computer, it has 12 columns; on a tablet, 8; and on a phone, 4.

<div class="mdc-layout-grid">
.
.
.
</div>

This is a mandatory class that defines the grid elements.

<div class="mdc-layout-grid__inner">
.
.
.
</div>

This is also a mandatory class for wrapping the grid cell. It’s like a “row” class of bootstrap. So, whenever you need to define the row then add class=”mdc-layout-grid__inner”

<div class="mdc-layout-grid__cell">
.
.
.
</div>

This class is used to define the columns just like bootstrap’s class=”col-md” etc.

The material grid system uses a column system. So, you can also define the size of the column with specific devices.
With column size…

<div class="mdc-layout-grid__cell--span-8">
.
.
</div>
<div class="mdc-layout-grid__cell--span-4">
.
.
</div>

With devices…

<div class="mdc-layout-grid__cell--span-4-tablet">
.
.
</div>
--OR--
<div class="mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-2-phone">
.
.
</div>