Skip to content
Support Yumma CSS by starring us on GitHub!

Grid Column

Controls the size and position of elements across columns

Grid Column Span

Allows a grid item to span a specific number of columns.

Class Properties

gc-s-1

grid-column: span 1 / span 1;

gc-s-2

grid-column: span 2 / span 2;

gc-s-3

grid-column: span 3 / span 3;

gc-s-4

grid-column: span 4 / span 4;

gc-s-5

grid-column: span 5 / span 5;

gc-s-6

grid-column: span 6 / span 6;

gc-s-7

grid-column: span 7 / span 7;

gc-s-8

grid-column: span 8 / span 8;

gc-s-9

grid-column: span 9 / span 9;

gc-s-10

grid-column: span 10 / span 10;

gc-s-11

grid-column: span 11 / span 11;

gc-s-12

grid-column: span 12 / span 12;

gc-s-13

grid-column: span 13 / span 13;

gc-s-14

grid-column: span 14 / span 14;

gc-s-15

grid-column: span 15 / span 15;

gc-s-16

grid-column: span 16 / span 16;

The gc-s-* utility can be used to define how many columns an element should span within a grid layout.

A
B
C
D
<div class="d-g g-4 gtc-3 stripes ta-c tc-white">
<div class="bg-indigo gc-s-2 p-4 rad-1">A</div>
<div class="bg-l-indigo-4 p-4 rad-1">B</div>
<div class="bg-l-indigo-4 p-4 rad-1">C</div>
<div class="bg-indigo gc-s-2 p-4 rad-1">D</div>
</div>

Grid Column End

Specifies where a grid item should end within the column grid line.

Class Properties

gce-1

grid-column-end: 1;

gce-2

grid-column-end: 2;

gce-3

grid-column-end: 3;

gce-4

grid-column-end: 4;

gce-5

grid-column-end: 5;

gce-6

grid-column-end: 6;

gce-7

grid-column-end: 7;

gce-8

grid-column-end: 8;

gce-9

grid-column-end: 9;

gce-10

grid-column-end: 10;

gce-11

grid-column-end: 11;

gce-12

grid-column-end: 12;

gce-13

grid-column-end: 13;

gce-14

grid-column-end: 14;

gce-15

grid-column-end: 15;

gce-16

grid-column-end: 16;

The gce-* utility is used to define the ending column line for a grid item.

A
B
C
<div class="d-g g-4 gtc-4 stripes ta-c tc-white">
<div class="bg-indigo gce-3 p-4 rad-1">A</div>
<div class="bg-l-indigo-4 p-4 rad-1">B</div>
<div class="bg-l-indigo-4 p-4 rad-1">C</div>
</div>

Grid Column Start

Defines the starting grid line for a grid item within the column layout.

Class Properties

gcs-1

grid-column-start: 1;

gcs-2

grid-column-start: 2;

gcs-3

grid-column-start: 3;

gcs-4

grid-column-start: 4;

gcs-5

grid-column-start: 5;

gcs-6

grid-column-start: 6;

gcs-7

grid-column-start: 7;

gcs-8

grid-column-start: 8;

gcs-9

grid-column-start: 9;

gcs-10

grid-column-start: 10;

gcs-11

grid-column-start: 11;

gcs-12

grid-column-start: 12;

gcs-13

grid-column-start: 13;

gcs-14

grid-column-start: 14;

gcs-15

grid-column-start: 15;

gcs-16

grid-column-start: 16;

The gcs-* utility sets the column where the grid item should begin.

A
B
C
<div class="d-g g-4 gcs-3 gtc-4 stripes ta-c tc-white">
<div class="bg-indigo p-4 rad-1">A</div>
<div class="bg-indigo p-4 rad-1">B</div>
<div class="bg-indigo p-4 rad-1">C</div>
</div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

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

<div class="gc-1 md:gc-2 ..."></div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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

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