Styles Systems

HStack and VStack in CSS: Exploring UI Layout Patterns

YouTube video of today’s Zoom session

In this zoom session, we explore horizontal and vertical alignment patterns and create highly composable and reusable CSS components – Flex, HStack, and VStack.

We showcase how HStack and VStack can be used to (basically) layout anything within the context of UI. These ideas extend beyond CSS and can be applied in visual design as well as JavaScript powered component libraries.

HStack and VStack have become a core foundation within the G2 Components project.

Source code from this session can be found here:

By Q

I specialize in Design Systems, Interaction, and UI.
I'm a Principal Designer at Automattic.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s