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.
| Utility | 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; |
This example sets the grid column to span 2 / span 2. The item will span across 2 columns, starting from its current position and occupying the next 2 columns in the grid.
<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-indigo-8 p-4 rad-1">B</div> <div class="bg-indigo-8 p-4 rad-1">C</div> <div class="bg-indigo gc-s-2 p-4 rad-1">D</div></div>Grid Column End
Controls where a grid item should end within the column grid line.
| Utility | 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; |
This example sets the grid column end to 3. The item will end at the third column line, effectively spanning from its starting position to the second column line.
<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-indigo p-4 rad-1">B</div> <div class="bg-indigo p-4 rad-1">C</div></div>Grid Column Start
Controls the starting grid line for a grid item within the column layout.
| Utility | 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; |
This example sets the grid column start to 3. The item will begin at the third column line, positioning it to start in the third column of the grid.
<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>Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
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>
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>