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

Justify self

The justify self class sets the justify-self property. It controls how an individual grid item is aligned along the inline (row) axis within its grid area, allowing it to override the container’s justify-items setting for that specific item. In flexbox, justify-self is ignored, so it has no effect. Overview
CSS Shortcut class Applied style 
justify-self-auto
 
justify-self: auto;
 
justify-self-center
 
justify-self: center;
 
justify-self-stretch
 
justify-self: stretch;
 
justify-self-start
 
justify-self: start;
 
justify-self-end
 
justify-self: end;

Examples

Auto
justify-self-auto

The item with the justify-self-auto class follows the container’s justify-items setting.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 gap-300 justify-items-stretch">
  <p>1</p>
  <p class="justify-self-auto">2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Centre
justify-self-center

The item with the justify-self-center class is centred horizontally within its grid area along the inline axis, overriding the container’s justify-items setting.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 gap-300 justify-items-stretch">
  <p>1</p>
  <p class="justify-self-center">2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Stretch
justify-self-stretch

The item with the justify-self-stretch class stretches to fill the full width of its grid area along the inline axis (default behaviour), overriding the container’s justify-items setting.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 gap-300 justify-items-start">
  <p>1</p>
  <p class="justify-self-stretch">2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Start
justify-self-start

The item with the justify-self-start class aligns to the start edge of its grid area along the inline axis, overriding the container’s justify-items setting.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 gap-300 justify-items-stretch">
  <p>1</p>
  <p class="justify-self-start">2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

End
justify-self-end

The item with the justify-self-end class aligns to the end edge of its grid area along the inline axis, overriding the container’s justify-items setting.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 gap-300 justify-items-stretch">
  <p>1</p>
  <p class="justify-self-end">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:justify-self-center ...">
  ...
</div>
Learn more about the responsive layout prefix. 2026-02-12