> For the complete documentation index, see [llms.txt](https://nzbin.gitbook.io/ng-matero/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nzbin.gitbook.io/ng-matero/responsive/grid-class.md).

# Grid Class

Ng-Matero provides a grid which similar to Bootstrap grid that source code in `styles/grid`. The grid class is optional. You can choose any grid class you like, such as Bootstrap, Foundation, Semantic, etc.

The grid breakpoints for Ng-Matero are the same as the default breakpoints for flex-layout.

| breakpoint | mediaQuery                                               |
| ---------- | -------------------------------------------------------- |
| xs         | 'screen and (max-width: 599px)'                          |
| sm         | 'screen and (min-width: 600px) and (max-width: 959px)'   |
| md         | 'screen and (min-width: 960px) and (max-width: 1279px)'  |
| lg         | 'screen and (min-width: 1280px) and (max-width: 1919px)' |
| xl         | 'screen and (min-width: 1920px) and (max-width: 5000px)' |

It is used exactly the same way as Bootstrap except that the responsive breakpoints.