GC Design System CSS Shortcuts
GC Design System Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

Justify content

The justify content class sets the justify-content property. It controls how extra space is distributed between items in a flex or grid container along the main axis.

In flexbox, the flex-direction property sets the main and cross axis. The effects of justify-content change based on the container's direction.

Overview

CSS Shortcut class Applied style 
justify-content-around
 
justify-content: space-around;
 
justify-content-between
 
justify-content: space-between;
 
justify-content-evenly
 
justify-content: space-evenly;
 
justify-content-center
 
justify-content: center;
 
justify-content-start
 
justify-content: flex-start;
 
justify-content-end
 
justify-content: flex-end;

Examples

Around
justify-content-around

Columns are evenly spaced along the main axis with equal space around each line. This results in half-sized gaps at the start and end of the container.

In row layouts, spacing is horizontal with half gaps on left and right.
In column layouts, spacing is vertical with half gaps on top and bottom.

1

2

3

<div class="d-flex justify-content-around">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Between
justify-content-between

Columns are evenly space along the main axis with equal space between each line. There’s no space at the start or end of the container.

In row layouts, spacing is horizontal between items only.
In column layouts, spacing is vertical between items only.

1

2

3

<div class="d-flex justify-content-between">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Evenly
justify-content-evenly

Columns are evenly spaced along the main axis with equal space between all lines and the container edges, including the start and end.

In row layouts, spacing is equal horizontally between and around items.
In column layouts, spacing is equal vertically between and around items.

1

2

3

<div class="d-flex justify-content-evenly">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Centre
justify-content-center

Rows are grouped together and centred along the main axis within the container, with equal space above and below the entire group.

In row layouts, items are centred horizontally.
In column layouts, items are centred vertically.

1

2

3

<div class="d-flex justify-content-center">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Start
justify-content-start

Columns are grouped together at the start of the main axis within the container, leaving any extra space at the end of the container.

In row layouts, items align to the left.
In column layouts, items align to the top.

1

2

3

<div class="d-flex justify-content-start">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

End
justify-content-end

Columns are grouped together at the end of the main axis within the container, leaving any extra space at the beginning of the container.

In row layouts, items align to the right.
In column layouts, items align to the bottom.

1

2

3

<div class="d-flex justify-content-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:justify-content-center ...">
  ...
</div>

Learn more about the responsive layout prefix.

2025-10-01