What we did

September 2025 : This month we investigated "The Fundamentals of CSS Alignment".

September was all about Alignment. Aligning items in HTML was rather difficulty. Who remembers “floats” or margin right 50% margin left 50% to align an item in the middle of a container. Then Flexbox was introduced to CSS to make alignment easier. It helped us align items either vertical or horizonal. Then they introduced Grid which gave us alignment in both directions. A key aspect of both of these methods is the justify selectors which are used in both options.

I found an article “The Fundamentals of CSS Alignment” from Temani Afi. It a very comprehensive summary of the state of alignment in CSS. Dealing with both Grid and Flex but Temani didn’t forget the original block or inline alignment.

Below is the summaries of each section;

The alignment theory;

• We have content level and item level alignment: place-content and place-self.
• Two axes: align-* and justify-* variations.
• We can define the same alignment for all the items at once: place-items (align-items and justify-items).
• *-content and *-items are defined on the container and *-self are defined on the items.

Then the Grid summary;

• At the “content level”, we align the grid cells within the grid container.
• At the “item level”, we align a grid item within its grid area.
• A grid area consists of one or more adjacent grid cells.
• normal is the default value of the *-content and *-items properties. It behaves the same as stretch (It has no effect if we define fixed sizes).
• auto is the default value of the *-self properties. It means use the value set on the *-items properties.
• The use of fr will consume all the free space, disabling any “content level” alignment in the corresponding axis.

The Flex summary;

• We have the main and cross axes:
• row direction: main = horizonal and cross = vertical. column direction: main = vertical and cross = horizontal.
• In the main axis, we only have “content level” alignment, where we align the flex items. There is no stretch alignment in the main axis (normal and stretch behave as start).
• In the cross axis:
• At the “content level”, we align the flex lines within the flex container.
• At the “item level”, we align a flex item within its flex line,.
• flex-wrap: nowrap disables the “content level” alignment in the cross axis.

And finally, a sum up of the block containment;

• In a block container, we have only one level of alignment per axis: “content level” alignment vertically and “item level” alignment horizontally.
  • An item is a block element.
  • The content is the smallest rectangle containing all the items.

Have a look and try the quiz.

Steve South

Steve South
Web Design leader