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 rows

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

Examples

1 row
grid-rows-1

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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 rows
grid-rows-2

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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 rows
grid-rows-3

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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 rows
grid-rows-4

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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 rows
grid-rows-5

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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 rows
grid-rows-6

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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 rows
grid-rows-7

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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 rows
grid-rows-8

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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 rows
grid-rows-9

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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 rows
grid-rows-10

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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 rows
grid-rows-11

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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 rows
grid-rows-12

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

1

2

3

4

5

6

7

8

9

10

11

12

<div class="d-grid grid-rows-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-rows-none

This container removes any explicit row definition. Each row’s height will be determined by its content unless other sizing rules are applied.

No rows are defined, and the grid layout is not applied.

No rows are defined, and the grid layout is not applied.

No rows are defined, and the grid layout is not applied.

<div class="d-grid grid-rows-none gap-300">
  <p>
    No rows are defined, and the grid layout is not applied.
  </p>
  <p>
    No rows are defined, and the grid layout is not applied.
  </p>
  <p>
    No rows are defined, and the grid layout is not applied.
  </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-rows-3 ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01