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

Grid columns

The grid columns class sets the grid-template-columns property. It controls how space in a grid container is divided into columns. It sets how wide each column should be and how many columns the grid will have. Overview
CSS Shortcut class Applied style 
grid-cols-1
 
grid-template-columns: repeat(1, minmax(0, 1fr));
 
grid-cols-2
 
grid-template-columns: repeat(2, minmax(0, 1fr));
 
grid-cols-3
 
grid-template-columns: repeat(3, minmax(0, 1fr));
 
grid-cols-4
 
grid-template-columns: repeat(4, minmax(0, 1fr));
 
grid-cols-5
 
grid-template-columns: repeat(5, minmax(0, 1fr));
 
grid-cols-6
 
grid-template-columns: repeat(6, minmax(0, 1fr));
 
grid-cols-7
 
grid-template-columns: repeat(7, minmax(0, 1fr));
 
grid-cols-8
 
grid-template-columns: repeat(8, minmax(0, 1fr));
 
grid-cols-9
 
grid-template-columns: repeat(9, minmax(0, 1fr));
 
grid-cols-10
 
grid-template-columns: repeat(10, minmax(0, 1fr));
 
grid-cols-11
 
grid-template-columns: repeat(11, minmax(0, 1fr));
 
grid-cols-12
 
grid-template-columns: repeat(12, minmax(0, 1fr));
 
grid-cols-none
 
grid-template-columns: none;

Examples

1 column
grid-cols-1

This container uses a grid layout with 1 column. The 12 items are stacked vertically in a single column. Each item occupies its own row.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-1 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

2 columns
grid-cols-2

This container uses a grid layout with 2 columns. The 12 items are laid out in 2 columns and 6 rows. Each item takes up 50% of the available container width.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-2 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

3 columns
grid-cols-3

This container uses a grid layout with 3 columns. The 12 items are laid out in 3 columns and 4 rows. Each item takes up 33.33% of the available container width.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-3 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

4 columns
grid-cols-4

This container uses a grid layout with 4 columns. The 12 items are laid out in 4 columns 3 rows. Each item takes up 25% of the available container width.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-4 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

5 columns
grid-cols-5

This container uses a grid layout with 5 columns. The 12 items are laid out in 5 columns and 3 rows. Each item takes up 20% of the available container width.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-5 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

6 columns
grid-cols-6

This container uses a grid layout with 6 columns. The 12 items are laid out in 6 columns and 2 rows. Each item takes up 16.67% of the available container width.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-6 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

7 columns
grid-cols-7

This container uses a grid layout with 7 columns. The 12 items are laid out in 7 columns and 2 rows. Each item takes up 14.29% of the available container width.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-7 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

8 columns
grid-cols-8

This container uses a grid layout with 8 columns. The 12 items are laid out in 8 columns and 2 rows. Each item takes up 12.5% of the available container width.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-8 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

9 columns
grid-cols-9

This container uses a grid layout with 9 columns. The 12 items are laid out in 9 columns and 2 rows. Each item takes up 11.11% of the available container width.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-9 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

10 columns
grid-cols-10

This container uses a grid layout with 10 columns. The 12 items are laid out in 10 columns and 2 rows. Each item takes up 10% of the available container width.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-10 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

11 columns
grid-cols-11

This container uses a grid layout with 11 columns. The 12 items are laid out in 11 columns and 2 rows. Each item takes up 9.09% of the available container width.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-11 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

12 columns
grid-cols-12

This container uses a grid layout with 12 columns. The 12 items are laid out in 12 columns and 1 row. Each item takes up 8.33% of the available container width.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-12 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

None
grid-cols-none

This container removes any explicit column definition. No columns are created and children won’t automatically be organized into columns.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-cols-none gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</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:grid-cols-3 ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01