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 content

The align content class sets the align-content property. It controls how extra space is distributed between items in a flex or grid container along the cross axis. In flexbox, the flex-direction property sets the main and cross axis. The effects of align-content change based on the container's direction. Overview
CSS Shortcut class Applied style 
align-content-around
 
align-content: space-around;
 
align-content-between
 
align-content: space-between;
 
align-content-evenly
 
align-content: space-evenly;
 
align-content-center
 
align-content: center;
 
align-content-start
 
align-content: start;
 
align-content-end
 
align-content: end;

Examples

Around
align-content-around

Rows are evenly spaced along the cross axis with equal space around each line. This results in half-sized gaps at the start and end of the container. In row layouts, the spacing appears vertically between rows.
In column layouts, the spacing appears horizontally between columns.

1

2

3

4

5

6

<div class="d-flex align-content-around">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Between
align-content-between

Rows are evenly space along the cross axis with equal space between each line. There’s no space at the start or end of the container. In row layouts, the spacing appears vertically between rows.
In column layouts, the spacing appears horizontally between columns.

1

2

3

4

5

6

<div class="d-flex align-content-between">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Evenly
align-content-evenly

Rows are evenly spaced along the cross axis with equal space between all lines and the container edges, including the start and end. In row layouts, the spacing appears vertically between rows.
In column layouts, the spacing appears horizontally between columns.

1

2

3

4

5

6

<div class="d-flex align-content-evenly">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Centre
align-content-center

Rows are grouped together and centred along the cross axis within the container, with equal space above and below the entire group. In row layouts, the rows are centred vertically.
In column layouts, the columns are centred horizontally.

1

2

3

4

5

6

<div class="d-flex align-content-center">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Start
align-content-start

Rows are grouped together at the start of the cross axis within the container. It leaves any extra space at the end of the container. In row layouts, the rows align to the top of the container.
In column layouts, the columns align to the left of the container.

1

2

3

4

5

6

<div class="d-flex align-content-start">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

End
align-content-end

Rows are grouped together at the end of the cross axis within the container. It leaves any extra space at the beginning of the container. In row layouts, the rows align to the bottom of the container.
In column layouts, the rows align to the right of the container.

1

2

3

4

5

6

<div class="d-flex align-content-end">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</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-content-center ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01