What is the pros and cons with using grid-base? Using custom grid today and considering switching to aem-grid

[Nicolinekh]

Hi all, 

Currently, I am using a custom grid that has been used for a few years. Are now considering doing a big frontend change and starting from scratch with a new grid. Previously what was used was 24 columns across all breakpoints but now want to use 12 columns for desktop and 6 and 4 for smaller screens. What pros would I get from using grid_base for an aem_grid and are there any cons with using it? 

[Anmol_Bhardwaj · Accepted solution]

Hi @Nicolinekh ,

There are several benefits to using grid_base :

1. Customization: this allows for a high degree of customization, giving you control over the number of columns, the gutter size, and the breakpoints for your grid.

2. Responsive design: It is designed to be responsive, meaning that it will adjust the layout of your content based on the screen size of the device being used. This makes it easier to create a consistent and user-friendly experience across multiple devices.

3. Compatibility: Since grid_base is built into AEM, it is designed to work seamlessly with other AEM components and templates, making creating consistent designs and layouts across your website easier.

Cons:

1. Limited column sizes: Grid_base is based on a fixed grid, which means that the number of columns and their sizes are fixed. 

2. Limited gutter sizes: Similarly, the gutter size in grid_base is fixed, so if you need more control over the spacing between columns, you may need to use a different grid system or implement custom CSS.
   
   

3. Limited breakpoint options: While grid_base supports multiple breakpoints, the available options may not be sufficient for your needs. 
   
   

4. Limited flexibility for non-grid elements: Grid_base is designed primarily for creating grid-based layouts, so if you need to incorporate non-grid elements into your design (such as full-width images or custom UI components), you may need to implement custom CSS or JavaScript to achieve the desired layout.
   
   

5. Limited support for older browsers: Grid_base uses a CSS grid, which is not supported in older browsers such as Internet Explorer.