Flex grow

It defines how much a flex item can grow relative to others in the same container, based on available free space.

The flex-grow property defines the ability of a flex item to grow and occupy available free space within a flex container.

The default is 0, meaning the item will not grow beyond its initial size.

If all items have flex-grow:1 they grow equally.

If one item has flex-grow:2 and others have 1, that item takes twice as much of the extra space as the others.

flex-grow values are available from 0 to 12.

Class list

<div class="co-d-flex">
  <div class="co-grow-1">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="co-d-flex">
  <div>Item 1</div>
  <div class="co-grow-2">Item 2</div>
  <div>Item 3</div>
</div>

All responsive flex-grow classes are available from co-grow-1 to co-grow-12

<div class="co-d-flex">
  <div class="sm:co-grow-1">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>