There are some nice articles explaining what are CSS Modules, so I recommend you reading them first:

• What are CSS Modules and why do we need them?
• CSS Modules repository

Why would you want to use CSS Modules with Angular?

CSS Modules are useful in the following scenarios:

1. Your web application is used as web-component or inside an iframe on other website and you want to prevent the host website to override your styles.
2. You use  ViewEncapsulation.None for your styles so it will help you to prevent conflicts in the styles of your components.
3. You use external libraries that override your application styles and you want to prevent that.

How to use CSS Modules with Angular?

We can use CSS Modules with Angular through  postcss-modules and  posthtml-css-modules.

First,  postcss-modules hash all the class names in the styles files in build time.

Example: takes app.component.scss

.grid-container {
    display: grid; grid-template-rows: auto;
    grid-template-rows: 90px calc(100vh - 170px) 80px;
    width: 100vw; height: 100vh;
}

.header {
    background-color: #1ba0f7;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    img {
        width: 64px;
        height: 64px; 
    }
}

.footer {
    background-color: #1ba0f7;
}

#angular #css