To solve alignment issue on category page or credit card section or such grid arrangements when all grids are not arranged full one after other
| we are having alignment issues when elements are in grid pattern, some grid will be empty and elements will be moved to next line, to solve this we can use full display property to set as grid and using grid tamplete we can arrange elemets in rows or columns and specify number of elements in each row and column |
For this set display property to grid
Use grid-tamplate-colums or grid-template-rows set number of rows or columns required
Example code:
display: grid;
grid-template-columns: 1fr 1fr 1fr;
Here 1fr will be parts of display width