Grid Template Rows
Utilities to specify the rows in a grid layout.
Class | Properties |
---|---|
gtr-1 | grid-template-rows: repeat(1, minmax(0, 1fr)); |
gtr-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); |
gtr-3 | grid-template-rows: repeat(3, minmax(0, 1fr)); |
gtr-4 | grid-template-rows: repeat(4, minmax(0, 1fr)); |
gtr-5 | grid-template-rows: repeat(5, minmax(0, 1fr)); |
gtr-6 | grid-template-rows: repeat(6, minmax(0, 1fr)); |
gtr-7 | grid-template-rows: repeat(7, minmax(0, 1fr)); |
gtr-8 | grid-template-rows: repeat(8, minmax(0, 1fr)); |
gtr-9 | grid-template-rows: repeat(9, minmax(0, 1fr)); |
gtr-10 | grid-template-rows: repeat(10, minmax(0, 1fr)); |
gtr-11 | grid-template-rows: repeat(11, minmax(0, 1fr)); |
gtr-12 | grid-template-rows: repeat(12, minmax(0, 1fr)); |
gtr-13 | grid-template-rows: repeat(13, minmax(0, 1fr)); |
gtr-14 | grid-template-rows: repeat(14, minmax(0, 1fr)); |
gtr-15 | grid-template-rows: repeat(15, minmax(0, 1fr)); |
gtr-16 | grid-template-rows: repeat(16, minmax(0, 1fr)); |
This example sets the grid template rows to repeat(3, minmax(0, 1fr)). The grid will have 3 rows, each with a minimum size of 0 and a maximum size of 1fr, allowing them to grow and fill the available space equally.
A
B
C
D
E
F
G
H
<div class="ovf-auto p-r"> <div class="d-g g-4 gaf-c gtr-3 rad-1 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 class="bg-indigo p-4 rad-1">F</div> <div class="bg-indigo p-4 rad-1">G</div> <div class="bg-indigo p-4 rad-1">H</div> </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 modifiers
You can combine responsive breakpoints like sm:gtr-*
,md:gtr-*
, lg:gtr-*
, and xxl:gtr-*
allows targeting specific utilities in different viewports.
<div class="gtr-1 md:gtr-2 ..."></div>
Hover modifiers
Alternatively, you can apply :hover
by using h:gtr-*
utility to override elements and change their values when hovering over them.
<div class="gtr-1 h:gtr-2 ..."></div>