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 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