This Angular library facilitates the creation of grid-based layouts. It provides base components and services designed to be used with Magnolia CMS grid settings.

• grid-base.component: This component contains common functions that support grid rendering.
• grid-area.component: This component extends grid-base component and provides a common grid view that can be used as a customView for editable areas. The grid-area has wrapperClass input which allows users to customize the css wrapper class of the area.
• grid-width.pipe: This pipe is used to transform grid settings of components into grid css classes.
• viewport.service: This service can be used to get viewport list, default viewport Id and subscribe to viewport changes. Viewports and custom breakpoints are expected to be set before the service is used by calling fetchViewports function, it should be done in the root component of the parent project which uses grid-angular.
• context.service: This service provides magnoliaContext, mgnlAuthorServer and (optional) gridPrefix for grid-angular. The context value should be set in the root component of the parent project.

This library provides a flexible grid system. It includes a set of SCSS files that can be customized and compiled to suit various design needs.

• Responsive Grid: The grid adjusts to the specified viewports using media queries and predefined rules.
• Customizable Variables: Some of the key variables such as viewports and column gaps can be customized.

For quick integration, use the pre-built CSS file that comes with the library. Import the css file directly in the angular.json file or import the pre-built css file:

@import "node_modules/@magnolia/grid-angular/assets/styles.css";

If you require customization, such as changing the viewports or gutter widths, you will need to use the SCSS files directly.

• Override Default Variables Customize variables before importing the main grid styles:

@use './node_modules/@magnolia/grid-angular/assets/scss/abstracts/_variables.scss' with (
  $grid-default-breakpoint: lg,
);

• Import the SCSS Library

@use 'node_modules/@magnolia/grid-angular/assets/scss/layout/_grid.scss';

• Make sure the project has the SCSS compiler setup.