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 ta-c" id="area"> <div class="bg-indigo gc-s-2 p-4 rad-1 tc-white">A</div> <div class="bg-indigo-8 p-4 rad-1 tc-indigo-5">B</div> <div class="bg-indigo-8 p-4 rad-1 tc-indigo-5">C</div> <div class="bg-indigo gc-s-2 p-4 rad-1 tc-white">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 ta-c tc-white" id="area"> <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 ta-c tc-white" id="area"> <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.
Media modifier
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>Hover modifier
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>