Grid Template Columns
Utilities to define the columns in a grid layout.
Class | Properties |
---|---|
gtc-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); |
gtc-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
gtc-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
gtc-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); |
gtc-5 | grid-template-columns: repeat(5, minmax(0, 1fr)); |
gtc-6 | grid-template-columns: repeat(6, minmax(0, 1fr)); |
gtc-7 | grid-template-columns: repeat(7, minmax(0, 1fr)); |
gtc-8 | grid-template-columns: repeat(8, minmax(0, 1fr)); |
gtc-9 | grid-template-columns: repeat(9, minmax(0, 1fr)); |
gtc-10 | grid-template-columns: repeat(10, minmax(0, 1fr)); |
gtc-11 | grid-template-columns: repeat(11, minmax(0, 1fr)); |
gtc-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); |
gtc-13 | grid-template-columns: repeat(13, minmax(0, 1fr)); |
gtc-14 | grid-template-columns: repeat(14, minmax(0, 1fr)); |
gtc-15 | grid-template-columns: repeat(15, minmax(0, 1fr)); |
gtc-16 | grid-template-columns: repeat(16, minmax(0, 1fr)); |
This example sets the grid template columns to repeat(3, minmax(0, 1fr)). The grid will have 3 columns, each with a minimum size of 0 and a maximum size of 1fr, allowing them to grow and fill the available space equally.
<div class="d-g g-4 gtc-3 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 class="bg-indigo p-4 rad-1">D</div> <div class="bg-indigo p-4 rad-1">E</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:gtc-*
,md:gtc-*
, lg:gtc-*
, and xxl:gtc-*
allows targeting specific utilities in different viewports.
<div class="gtc-1 md:gtc-2 ..."></div>
Alternatively, you can apply :hover
by using h:gtc-*
utility to override elements and change their values when hovering over them.
<div class="gtc-1 h:gtc-2 ..."></div>