Flex Grow

Controls the growth of flex elements.

Class	Property
fg-0	flex-grow: 0;
fg-1	flex-grow: 1;
fg-2	flex-grow: 2;
fg-3	flex-grow: 3;
fg-4	flex-grow: 4;
fg-5	flex-grow: 5;
fg-6	flex-grow: 6;
fg-7	flex-grow: 7;
fg-8	flex-grow: 8;

Controls how much of the flex container’s positive free space, if there is any, should be used for the flex item’s main size.

A

B

C

<div class="d-f g-4 p-4">
  <div class="bg-indigo fg-0 p-4 rad-1 tc-white">A</div>
  <div class="bg-indigo fg-1 p-4 rad-1 tc-white">B</div>
  <div class="bg-indigo fg-2 p-4 rad-1 tc-white">C</div>
</div>

---

Using responsive modifiers

Using responsive breakpoints like sm:fg-*, md:fg-*, lg:fg-*, and xxl:fg-* allows targeting specific utilities in different viewports.

<div class="fg-1 md:fg-2 ..."></div>

Using hover modifiers

Using :hover modifiers such as h:fg-* allows you to override elements and change their values when hovering over them.

<div class="fg-1 h:fg-2 ..."></div>