Grid Column
Controls the size and position of elements across columns.
Grid Column Span
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; |
Grid Column Start
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; |
Grid Column Row
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; |
Using breakpoints
Using responsive breakpoints like sm:gc-*
, md:gc-*
, lg:gc-*
, and xxl:gc-*
allows targeting specific utilities in different viewports.
Using variants
Using :hover
variants such as h:gc-*
allows you to override elements and change their values when hovering over them.