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.
<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.
<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.
<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>