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

Place content

The place content class sets the place-content property. It is a shorthand for setting both cross axis and main axis. It controls how extra space is distributed between rows and columns in multi-line flex or grid containers. In flexbox, the flex-direction property sets the main and cross axis. The effects of place-content change based on the container's direction. Overview
CSS Shortcut class Applied style 
place-content-around
 
place-content: space-around;
 
place-content-between
 
place-content: space-between;
 
place-content-evenly
 
place-content: space-evenly;
 
place-content-center
 
place-content: center;
 
place-content-stretch
 
place-content: stretch;
 
place-content-start
 
place-content: start;
 
place-content-end
 
place-content: end;

Examples

Around
place-content-around

Rows and columns have equal space around them, resulting in half-sized gaps at the container edges.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 place-content-around">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Between
place-content-between

Rows and columns are evenly spaced with equal space between them, and no space before the first or after the last item at the container edges.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 place-content-between">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Evenly
place-content-evenly

Rows and columns have equal space before, between, and after every item, including the container edges.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 place-content-evenly">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Centre
place-content-center

Rows and columns are grouped together at the center of the container, with equal space on both sides.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 place-content-center">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Stretch
place-content-stretch

Rows and columns stretch along both axes to fill the container, distributing space evenly.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 place-content-stretch">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Start
place-content-start

Rows and columns are grouped together at the start of their respective axes, with no space before the first item.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 place-content-start">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

End
place-content-end

Rows and columns are grouped together at the end of their axes, leaving space before the first item.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 place-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:place-content-center ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01