Skip to content
Sunsetting Yumma CSS Intellisense extension 👋

Grid Row

Controls the size and position of elements across rows.

Grid Row Span

Controls the row span of a grid item.

Class Properties

gr-s-1

grid-row: span 1 / span 1;

gr-s-2

grid-row: span 2 / span 2;

gr-s-3

grid-row: span 3 / span 3;

gr-s-4

grid-row: span 4 / span 4;

gr-s-5

grid-row: span 5 / span 5;

gr-s-6

grid-row: span 6 / span 6;

gr-s-7

grid-row: span 7 / span 7;

gr-s-8

grid-row: span 8 / span 8;

gr-s-9

grid-row: span 9 / span 9;

gr-s-10

grid-row: span 10 / span 10;

gr-s-11

grid-row: span 11 / span 11;

gr-s-12

grid-row: span 12 / span 12;

gr-s-13

grid-row: span 13 / span 13;

gr-s-14

grid-row: span 14 / span 14;

gr-s-15

grid-row: span 15 / span 15;

gr-s-16

grid-row: span 16 / span 16;

This example sets the grid row to span 2 / span 2. The item will span across 2 rows, starting from its current position and occupying the next 2 rows in the grid.

A
B
C
D
E
<div class="d-g g-4 gtc-3 h-75 stripes ta-c tc-white">
<div class="ai-c bg-indigo gr-s-2 d-f jc-c p-4 rad-1">A</div>
<div class="ai-c bg-d-indigo-4 d-f jc-c p-4 rad-1">B</div>
<div class="ai-c bg-d-indigo-4 d-f jc-c p-4 rad-1">C</div>
<div class="ai-c bg-d-indigo-4 d-f jc-c p-4 rad-1">D</div>
<div class="ai-c bg-d-indigo-4 d-f jc-c p-4 rad-1">E</div>
</div>

Grid Row End

Controls where the grid item ends on the grid rows.

Class Properties

gre-1

grid-row-end: 1;

gre-2

grid-row-end: 2;

gre-3

grid-row-end: 3;

gre-4

grid-row-end: 4;

gre-5

grid-row-end: 5;

gre-6

grid-row-end: 6;

gre-7

grid-row-end: 7;

gre-8

grid-row-end: 8;

gre-9

grid-row-end: 9;

gre-10

grid-row-end: 10;

gre-11

grid-row-end: 11;

gre-12

grid-row-end: 12;

gre-13

grid-row-end: 13;

gre-14

grid-row-end: 14;

gre-15

grid-row-end: 15;

gre-16

grid-row-end: 16;

This example sets the grid row end to 3. The item will end at the first row line, effectively spanning from its starting position to the second row line.

A
B
C
<div class="p-r">
<div class="d-g g-4 gaf-c gtr-3 rad-1 stripes ta-c tc-white">
<div class="ai-c bg-indigo d-f d-g gr-s-2 gre-3 jc-c p-4 rad-1">A</div>
<div class="ai-c bg-d-indigo-4 d-f d-g gre-4 grs-1 jc-c p-4 rad-1">B</div>
<div class="ai-c bg-d-indigo-4 d-f d-g gre-4 grs-1 jc-c p-4 rad-1">C</div>
</div>
</div>

Grid Row Start

Controls where the grid item begins on the grid rows.

Class Properties

grs-1

grid-row-start: 1;

grs-2

grid-row-start: 2;

grs-3

grid-row-start: 3;

grs-4

grid-row-start: 4;

grs-5

grid-row-start: 5;

grs-6

grid-row-start: 6;

grs-7

grid-row-start: 7;

grs-8

grid-row-start: 8;

grs-9

grid-row-start: 9;

grs-10

grid-row-start: 10;

grs-11

grid-row-start: 11;

grs-12

grid-row-start: 12;

grs-13

grid-row-start: 13;

grs-14

grid-row-start: 14;

grs-15

grid-row-start: 15;

grs-16

grid-row-start: 16;

This example sets the grid row start to 3. The item will begin at the first row line, positioning it to start in the third row of the grid.

A
B
C
<div class="p-r">
<div class="d-g g-4 gaf-c gtr-3 rad-1 stripes ta-c tc-white">
<div class="ai-c bg-indigo d-f d-g gr-s-2 grs-2 jc-c p-4 rad-1">A</div>
<div class="ai-c bg-d-indigo-4 d-f d-g gre-4 grs-1 jc-c p-4 rad-1">B</div>
<div class="ai-c bg-d-indigo-4 d-f d-g gre-4 grs-1 jc-c p-4 rad-1">C</div>
</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:gr-*,md:gr-*, lg:gr-*, and xxl:gr-* allows targeting specific utilities in different viewports.

<div class="gr-1 md:gr-2 ..."></div>
Hover modifiers

Alternatively, you can apply :hover by using h:gr-* utility to override elements and change their values when hovering over them.

<div class="gr-1 h:gr-2 ..."></div>