A theme based off of the HubSpot CMS Boilerplate. This theme includes modules and templates that demonstrate how to utilize GraphQL as part of a website built with HubSpot CMS and Custom CRM Objects.
Fixing card alignment if there are more than 2 cards per row and one of the rows doesn't have the full amount of cards. The issue was we were leveraging justify-content: space-between; which was great for two card rows but doesn't work out well in a 3/4 column row if there are not 3/4 cards (note this is specifically if we want the outer cards to line up along the edge of the container). The solution was to avoid justify-content and use nth-child to handle the spacing depending on how many columns there are. I also added a couple of minor enhancements here (moved button to always align towards bottom of card so this was more aesthetically pleasing and had 3-4 column layouts shift down to two columns for smaller laptop/tablet before going down to one column on mobile). Adding a few screenshots below:
Fixing card alignment if there are more than 2 cards per row and one of the rows doesn't have the full amount of cards. The issue was we were leveraging
justify-content: space-between;which was great for two card rows but doesn't work out well in a 3/4 column row if there are not 3/4 cards (note this is specifically if we want the outer cards to line up along the edge of the container). The solution was to avoid justify-content and use nth-child to handle the spacing depending on how many columns there are. I also added a couple of minor enhancements here (moved button to always align towards bottom of card so this was more aesthetically pleasing and had 3-4 column layouts shift down to two columns for smaller laptop/tablet before going down to one column on mobile). Adding a few screenshots below: