Grid Column
Controls the size and position of elements across columns.
Grid Column Span
| Class | Property |
|---|---|
| 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; |
Grid Column End
| Class | Property |
|---|---|
| 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; |
Grid Column Start
| Class | Property |
|---|---|
| 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; |
Using responsive modifiers
Using 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>Using hover modifiers
Using :hover modifiers such as h:gc-* allows
you to override elements and change their values when hovering over them.
<div class="gc-1 h:gc-2 ..."></div>