GC Design SystemCSS Shortcuts
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Align items

The align items class sets the align-items property. It controls how items are aligned along the cross axis of a flex or grid container. In flexbox, the flex-direction property sets the main and cross axis. The effects of align-items change based on the container's direction. Overview
CSS Shortcut class Applied style 
align-items-baseline
 
align-items: baseline;
 
align-items-center
 
align-items: center;
 
align-items-stretch
 
align-items: stretch;
 
align-items-start
 
align-items: start;
 
align-items-end
 
align-items: end;

Examples

Baseline
align-items-baseline

Items are aligned along their text baselines, so text or inline content lines up consistently across items on the cross axis. In row layouts, the alignment is vertical.
In column layouts, the alignment is horizontal.

1

2

3

<div class="d-flex align-items-baseline">
  <p>1</p>
  <p class="pb-800">2</p>
  <p class="pt-900">3</p>
</div>

Centre
align-items-center

Items are centred along the cross axis. In row layouts, there’s equal space above and below.
In column layouts, there’s equal space to the left and right.

1

2

3

<div class="d-flex align-items-center">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Stretch
align-items-stretch

Items stretch to fill the container along the cross axis. In row layouts, they fill vertical space unless a fixed size is set.
In column layouts, they fill horizontal space unless a fixed size is set.

1

2

3

<div class="d-flex align-items-stretch">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Start
align-items-start

Items are aligned to the start of the cross axis. In row layouts, they’re aligned to the top of the container.
In column layouts, they’re aligned to the left of the container.

1

2

3

<div class="d-flex align-items-start">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

End
align-items-end

Items are aligned to the end of the cross axis. In row layouts, they’re aligned to the bottom of the container.
In column layouts, they’re aligned to the right of the container.

1

2

3

<div class="d-flex align-items-end">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:
  • xs: > 480px
  • sm: > 640px
  • md: > 768px
  • lg: > 1024px
  • xl: > 1280px
<div class="xs:align-items-center ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01