The art of layout design in CSS has transformed significantly over the past few years, thanks to the evolution of flexbox and grid layouts. At the heart of this transformation lie four crucial properties: align-content, justify-content, align-items, and justify-items. These properties are powerful tools that, when mastered, can help developers create more complex, responsive, and adaptable web layouts.

However, these properties can often cause confusion for developers as they have similar names and overlapping roles. This article aims to demystify these properties, explaining their individual functionalities and how they can be utilized in different contexts.

Align-content & Justify-content

align-content and justify-content are CSS properties that control the alignment of lines within a flex or grid container when there's extra space available. They help manage the space along the cross-axis and main-axis respectively.

Align-content

align-content property aligns a flex or grid container's lines within it when there's extra space in the cross-axis. The cross-axis is vertical for rows and horizontal for columns. It only applies when there's more than one line of flex items or grid tracks.

The values it can accept are:

• stretch (default): Lines stretch to take up the remaining space.
• flex-start / start: Lines packed towards the start of the flex container.
• flex-end / end: Lines packed towards the end of the flex container.
• center: Lines packed towards the center of the flex container.
• space-between: Lines evenly distributed; the first line at the start of the container and the last line at the end.
• space-around: Lines evenly distributed with equal space around them.
• space-evenly: Lines evenly distributed with equal space around and between them.

Justify-content

justify-content aligns a flex or grid container's items along the main axis of the current line. The main axis is horizontal for rows and vertical for columns.

It accepts the same values as align-content but acts along the main-axis.

Align-items & Justify-items

These properties allow you to align individual items within their grid or flex container. They are incredibly helpful in handling the alignment of items along the cross-axis and main-axis respectively.

Align-items

align-items sets the default alignment for all items within a flex or grid container along the cross-axis. For example, if your flex-direction is row (default), the cross-axis is vertical, and this property will determine how the children align vertically.

The values it can accept are:

• stretch (default): Items stretch to fill the container.
• flex-start / start: Items aligned towards the start of the container.
• flex-end / end: Items aligned towards the end of the container.
• center: Items aligned at the center of the container.
• baseline: Items displayed along the baseline of the container.

Justify-items

justify-items sets the default alignment for all items within a grid container along the main-axis (it does not work with flex containers).

It accepts the same values as align-items but acts along the main-axis.

💡 Note: If you wish to reuse your styling rules across multiple projects, consider using open-source tools such as Bit. With Bit, you can encapsulate your styling rules into independent components and reuse across different projects.

Learn more:

Conclusion

Understanding these four properties — align-content, justify-content, align-items, and justify-items - are essential for any developer aiming to create robust and responsive layouts. With these properties in your CSS toolkit, you can handle the alignment of elements with precision and flexibility.

Remember that the primary difference between these properties lies in the axis they operate upon, with align-* handling the cross-axis and justify-* taking care of the main-axis. Furthermore, keep in mind that -items properties manage individual items, while -content ones handle the line as a whole.

While these properties may seem daunting initially, experimenting with them in different scenarios will allow you to master them in no time. Happy coding!

Stay tuned for more deep dives into CSS properties and other development topics.

Build composable apps with reusable components, just like Lego

Bitis an open-source toolchain for the development of composable software.

With Bit, you can develop any piece of software — a modern web app, a UI component, a backend service or a CLI script — as an independent, reusable and composable unit of software. Share any component across your applications to make it easier to collaborate and faster to build.

Join the 100,000+ developers building composable software together.

Get started with these tutorials:

→ Micro-Frontends: Video // Guide

→ Code Sharing: Video // Guide

→ Modernization: Video // Guide

→ Monorepo: Video // Guide

→ Microservices: Video // Guide

→ Design System: Video // Guide