Creating clear, well-aligned card layouts is a typical activity in internet improvement. On this tutorial, I’ll stroll you thru constructing a grid of 4 playing cards per row. Every card incorporates a number of content material blocks — a title, picture, worth, bullet level record, and a call-to-action (CTA) button — aligned horizontally inside the card utilizing CSS Grid and the highly effective CSS Subgrid characteristic.
What You’ll Construct
- A card grid format (max of 4 playing cards per row).
- Every card incorporates a number of content material blocks aligned horizontally.
- Use of CSS Grid for the general format.
- Use of CSS Subgrid for internal alignment of content material inside every card.
![Card grid]()
Why Use CSS Subgrid?
CSS Subgrid is a comparatively new characteristic that permits a nested grid to inherit the observe sizing of its mum or dad grid. This implies you possibly can align internal content material completely with the outer grid with out manually calculating or duplicating observe sizes.
