To adjust the product grid maybe you'll need to modify the responsive grid system. Here's how to approach it:
- Customize Grid Breakpoints: Front-end developers can modify breakpoints (e.g., mobile/desktop widths) by editing the grid.less file. This allows alignment with UX-defined layouts
- Adjust Gutter Spacing by adding padding to grid columns using CSS. For example:
.aem-GridColumn:not(.container) {
padding: 0 8px;
}
@media (min-width: 768px) {
.aem-GridColumn:not(.container) {
padding: 0 16px;
}
}
This should ensure consistent spacing across components
- AEM’s grid uses fluid layouts (percentages) for responsiveness. Ensure templates and components are configured to adapt to screen sizes: AEM Responsive Grid System