Source: styleguide/styleguide.less, line 309

2.1 #permalink Grid

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

We use a 12-column grid with the ability to change layouts based on four viewport sizes:

Size Reference Device Class Prefix Minimum Size
Default Mobile n/a n/a
Small Mobile sm 23em (368px at 16px/em)
Medium Mobile landscape / tablet md 35.5em (568px at 16px/em)
Medium-Large Tablet landscape / desktop ml 48em (768px at 16px/em)
Large Desktop lg 64em (1024px at 16px/em)
X-Large Widescreen desktop xl 80em (1280px at 16px/em)

Resize your window to see the columns adapt.

We (attempt to) achieve all our layout needs using display:inline-block and position:absolute instead of the float property. One immediate consequence is that since grid elements are inline-block, they have small spaces between them. To see why, think of these inline-block elements like words. The DOM lays them out sequentially, left-to-right, and since there's whitespace in the markup between them, space is inserted (just like there's space inserted between words in text). Therefore we need to use the class grid-parent for an element which contains grid elements. This class decreases the letter-spacing property and magically makes everything work out.

Example

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Dolor Sit Amet

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Proident laborum

In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Praesent consectetur

Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.

By Sylwia Bartyzel from unsplash.com

Seven Columns

Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.

Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.

Five Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.

Markup
<div class="grid-parent">
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Lorem Ipsum</h3>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
         </p>
      </div>
   </div>
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Dolor Sit Amet</h3>
         <p>
            Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
         </p>
      </div>
   </div>
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Proident laborum</h3>
         <p>
            In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
         </p>
      </div>
   </div>
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Praesent consectetur</h3>
         <p>
            Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
         </p>
      </div>
   </div>
   <div class="grid-12">
      <img class="img-cover" src="https://s3.amazonaws.com/ooomf-com-files/wjNV6gWuQkqeuH8txHc9_sylwiabartyzel_unsplash_tatry_03.jpg" alt="By Sylwia Bartyzel from unsplash.com">
   </div>
   <div class="grid-7">
      <div class="box-padded">
         <h3>Seven Columns</h3>
         <p>
            Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.
         </p>
         <p>
            Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.
         </p>
      </div>
   </div>
   <div class="grid-5">
      <div class="box-padded">
         <h3>Five Columns</h3>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.
         </p>
      </div>
   </div>
</div>
Source: layout/grid_gg.less, line 4
Example

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing.

Dolor Sit Amet

Quis nostrud exercitation ullamco laboris nisi ut.

Proident laborum

In culpa qui officia deserunt mollit anim id est.

Praesent consectetur

Etiam vitae orci sed elit sagittis finibus ut.

Ullamco Laboris

Integer vitae lectus accumsan, egestas dui eget.

Deserunt Mollit Anim

Maecenas tempor pulvinar orci nec pellentesque.

Mollit quis

In culpa qui officia deserunt mollit anim id est.

Pulvinar orci nec

Etiam vitae orci sed elit sagittis finibus ut.

Nostrud Ullamco

In culpa qui officia deserunt mollit anim id est.

Three Columns

Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.

Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.

Two Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.

Markup
<div class="grid-parent">
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Lorem Ipsum</h3>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Dolor Sit Amet</h3>
         <p>
            Quis nostrud exercitation ullamco laboris nisi ut.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-1 grid5-lg-1">
      <div class="box-padded">
         <h3>Proident laborum</h3>
         <p>
            In culpa qui officia deserunt mollit anim id est.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Praesent consectetur</h3>
         <p>
            Etiam vitae orci sed elit sagittis finibus ut.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-1 grid5-lg-1">
      <div class="box-padded">
         <h3>Ullamco Laboris</h3>
         <p>
            Integer vitae lectus accumsan, egestas dui eget.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Deserunt Mollit Anim</h3>
         <p>
            Maecenas tempor pulvinar orci nec pellentesque.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-1 grid5-lg-1">
      <div class="box-padded">
         <h3>Mollit quis</h3>
         <p>
            In culpa qui officia deserunt mollit anim id est.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Pulvinar orci nec </h3>
         <p>
            Etiam vitae orci sed elit sagittis finibus ut.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Nostrud Ullamco</h3>
         <p>
            In culpa qui officia deserunt mollit anim id est.
         </p>
      </div>
   </div>
   <div class="grid5-3">
      <div class="box-padded">
         <h3>Three Columns</h3>
         <p>
            Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.
         </p>
         <p>
            Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.
         </p>
      </div>
   </div>
   <div class="grid5-2">
      <div class="box-padded">
         <h3>Two Columns</h3>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.
         </p>
      </div>
   </div>
</div>
Source: layout/grid_gg.less, line 89

2.1.2 #permalink Additional grid styles

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

grid-spacer adds a small padding to provide separation between grid elements.

grid-padder limits the width of a grid element to 80em (1280px in most browsers) so that the element won't be full-width at wide resolutions. grid-lg-padder is the same, but has a limit of 64em (1024px at base zoom) However it's not possible to display this behavior in the styleguide as these examples are forced into a 754px box...

Example
 
 
 
 

 

 
Markup
 <div class="grid-12 grid-parent">
  <div class="grid-12 grid-md-6 grid-lg-3 grid-spacer col_ggPrimary1"><div class="col_ggPrimary2">&nbsp;</div></div>
  <div class="grid-12 grid-md-6 grid-lg-3 grid-spacer col_ggPrimary1"><div class="col_ggPrimary2">&nbsp;</div></div>
  <div class="grid-12 grid-md-6 grid-lg-3 grid-spacer col_ggPrimary1"><div class="col_ggPrimary2">&nbsp;</div></div>
  <div class="grid-12 grid-md-6 grid-lg-3 grid-spacer col_ggPrimary1"><div class="col_ggPrimary2">&nbsp;</div></div>
 </div>
 <br/>
 <div class="grid-12 grid-parent col_ggPrimary1">
  <div class="grid-12 grid-padder col_ggPrimary2">&nbsp;</div>
 </div>
 <br/>
 <div class="grid-12 grid-parent col_ggPrimary1">
  <div class="grid-12 grid-lg-padder col_ggPrimary2">&nbsp;</div>
 </div>
Source: layout/grid_gg.less, line 190

2.2 #permalink Box

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

We use a percent-based box model. Note that percentages are always based on the width of the element's parent. Add more classes here as necessary, but try to keep them reusable by creating layouts with standard distances and sizing.

To date I haven't found any use for horizontal margins, and in fact they can make things strange because they mess up the grid by creating space where it's not designed to be. You should be able to achieve the same effect by creating another level of div and using padding on the outer div.

All box classes are based on the same scale:

  • Half: 0.75%;
  • 1: 1.5%;
  • 2: 3%;
  • 3: 4.5%;
  • 4: 6%;
  • 5: 9%;
  • 6: 12%;
Examples
Default styling
Half
1
2
3
4
5
6
.box_padded
Padded box on all four sides
box_paddedHalf
box_padded1
box_padded2
box_padded3
box_padded4
box_padded5
box_padded6
.box_verticalPadded
Padding on top & bottom
box_verticalPaddedHalf
box_verticalPadded1
box_verticalPadded2
box_verticalPadded3
box_verticalPadded4
box_verticalPadded5
box_verticalPadded6
.box_horizontalPadded
Padding on right & left
box_horizontalPaddedHalf
box_horizontalPadded1
box_horizontalPadded2
box_horizontalPadded3
box_horizontalPadded4
box_horizontalPadded5
box_horizontalPadded6
.box_topPadded
Padding on the top side only
box_topPaddedHalf
box_topPadded1
box_topPadded2
box_topPadded3
box_topPadded4
box_topPadded5
box_topPadded6
.box_rightPadded
Padding on the right side only
box_rightPaddedHalf
box_rightPadded1
box_rightPadded2
box_rightPadded3
box_rightPadded4
box_rightPadded5
box_rightPadded6
.box_bottomPadded
Padding on the bottom side only
box_bottomPaddedHalf
box_bottomPadded1
box_bottomPadded2
box_bottomPadded3
box_bottomPadded4
box_bottomPadded5
box_bottomPadded6
.box_leftPadded
Padding on the left side only
box_leftPaddedHalf
box_leftPadded1
box_leftPadded2
box_leftPadded3
box_leftPadded4
box_leftPadded5
box_leftPadded6
.box_verticalMargin
Margin on the top and bottom
box_verticalMarginHalf
box_verticalMargin1
box_verticalMargin2
box_verticalMargin3
box_verticalMargin4
box_verticalMargin5
box_verticalMargin6
.box_topMargin
Margin on the top only
box_topMarginHalf
box_topMargin1
box_topMargin2
box_topMargin3
box_topMargin4
box_topMargin5
box_topMargin6
.box_bottomMargin
Margin on the bottom only
box_bottomMarginHalf
box_bottomMargin1
box_bottomMargin2
box_bottomMargin3
box_bottomMargin4
box_bottomMargin5
box_bottomMargin6
Markup
<div class="grid-12 grid-parent layout_centerVertical">
  <div class="grid-4 grid-parent layout_center">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]Half col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]Half</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]1 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]1</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center box_bottomMargin1">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]2 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]2</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]3 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]3</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center ">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]4 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]4</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center box_bottomMargin1">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]5 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]5</div>
      </div>
    </div>
  </div>
  <div class="grid-4 grid-parent layout_center box_bottomMargin1">
    <div class="grid-11 col_ggPrimary3">
      <div class="[modifier class]6 col_ggPrimary1">
        <div class="grid-12 col_ggPrimary2">[modifier class]6</div>
      </div>
    </div>
  </div>
</div>
Source: layout/box.less, line 4
Example
absolutely positioned right  
absolutely positioned left  
absolutely positioned middle  
bottom-right outside positioned circle
9+
Markup
<div class="grid-12 layout_rel col_ggPrimary1 box_bottomMargin1">
   <span class="layout_abs layout_abs_right">absolutely positioned right</span>
   &nbsp; <!-- the absolute positioned element takes up no space so we lose the background of the parent without this-->
</div>
<div class="grid-12 layout_rel col_ggPrimary1 box_bottomMargin1">
   <span class="layout_abs layout_abs_left">absolutely positioned left</span>
   &nbsp; <!-- the absolute positioned element takes up no space so we lose the background of the parent without this-->
</div>
<div class="grid-12 layout_rel col_ggPrimary1 box_bottomMargin1">
   <span class="layout_abs layout_abs_middle">absolutely positioned middle</span>
   &nbsp; <!-- the absolute positioned element takes up no space so we lose the background of the parent without this-->
</div>
<div class="grid-2 col_ggPrimary2 box_padded2 layout_rel">
   bottom-right outside positioned circle
   <div class="circleIcon col_ggSecondary3 layout_abs layout_abs_bottomRightOutside text_fontSizeSmallest">9+</div>
</div>
Source: layout/layout.less, line 21
Examples
Default styling
positioned circle
9+
top-right inside positioned sprite



bottom
.layout_abs_left
Absolute Left
layout_abs_left positioned circle
9+
top-right inside positioned sprite



bottom
.layout_abs_right
Absolute Right
layout_abs_right positioned circle
9+
top-right inside positioned sprite



bottom
.layout_abs_middle
Middle (horizontally)
layout_abs_middle positioned circle
9+
top-right inside positioned sprite



bottom
.layout_abs_bottom
Absolute Bottom
layout_abs_bottom positioned circle
9+
top-right inside positioned sprite



bottom
.layout_abs_bottomRightOutside
Bottom Right slightly outside the parent
layout_abs_bottomRightOutside positioned circle
9+
top-right inside positioned sprite



bottom
.layout_abs_topRightInside
Top Right, inside the parent
layout_abs_topRightInside positioned circle
9+
top-right inside positioned sprite



bottom
.layout_abs_topRightOutside
Top Right, slightly outside the parent
layout_abs_topRightOutside positioned circle
9+
top-right inside positioned sprite



bottom
Markup
<div class="grid-2 col_ggPrimary2 layout_rel">
   [modifier class] positioned circle
   <div class="circleIcon col_ggSecondary3 layout_abs [modifier class] text_fontSizeSmallest">9+</div>
</div>
<div class="grid-1"></div>
<div class="grid-2 col_ggPrimary2 box_padded2 layout_rel">
   top-right inside positioned sprite
   <div class="sprite sprite_close_gray layout_abs layout_abs_topRightInside"></div>
</div>
<div class="grid-1"></div>
<div class="grid-2 col_ggPrimary2 layout_rel">
   <br/><br/><br/>
   <div class="layout_abs layout_abs_bottom col_ggPrimary1">bottom</div>
</div>
Source: layout/layout.less, line 44
Example
text center aligned
div center aligned
text left aligned
text right aligned
Markup
<div class="grid-12 layout_center col_ggPrimary2 box_bottomMargin1">
   <span>text center aligned</span>
</div>
<div class="grid-12 layout_center col_ggPrimary2 box_bottomMargin1">
   <div class="grid-3 col_ggPrimary1">div center aligned</div>
</div>
<div class="grid-12 layout_alignLeft col_ggPrimary2 box_bottomMargin1">
   <span>text left aligned</span>
</div>
<div class="grid-12 layout_alignRight col_ggPrimary2 box_bottomMargin1">
   <span>text right aligned</span>
</div>
Source: layout/layout.less, line 130
Example
one line of text
two lines of text
two lines of text
Markup
 <div class="col_ggPrimary1 grid-parent box_verticalPadded2 layout_center layout_centerVertical">
  <div class="grid-3 col_ggPrimary2 box_margin2">one line of text</div>
  <div class="grid-3 col_ggPrimary2 box_margin2">two lines of text<br/>two lines of text</div>
 </div>
Source: layout/layout.less, line 167
Example




layout_higher1



Markup
 <div class="grid-6 grid-parent col_ggPrimary1 layout_center layout_hideOverflow">
  <br/><br/><br/><br/>
  <div class="grid-6 layout_higher1 col_ggPrimary2">layout_higher1<br/><br/><br/><br/></div>
 </div>
Source: layout/layout.less, line 187

2.3.6 #permalink Center Both

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Applies absolute positioning and css3 transform to position a div in the middle of its parent. Useful in overlaying text over an image. Note that the parent must be relative positioned.

Example
gift
Markup
    <div class="grid-3 img-overlay layout_rel">
       <div class="grid-0 grid-md-12 sprite sprite_gift layout_centerBoth text_fontSizeZero zindex_overlayTop">gift</div>
       <img src="/img/banners/photoBlock6.jpg" class="img-cover"/>
    </div>
Source: layout/layout.less, line 207
Example
Markup
  <div class="print_only">Will only show in print; not on a screen</div>
  <div class="print_noPrint">Will only show on screens; not in print</div>
Source: base/print.less, line 1

2.5 #permalink Tables

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Handles display of tabular data. Should only be used when a table is the appropriate visual element and never for layout.

Example
Employee Apples Oranges
Alice 10 0
Bob 0 10
Markup
<table>
   <tr>
      <th>Employee</th>
      <th>Apples</th>
      <th>Oranges</th>
   </tr>
   <tr>
      <td>Alice</td>
      <td>10</td>
      <td>0</td>
   </tr>
   <tr>
      <td>Bob</td>
      <td>0</td>
      <td>10</td>
   </tr>
</table>
Source: base/tables.less, line 4
Example
Employee Apples Oranges
Alice 10 0
Bob 0 10
Carol 2 13
Dave 23 4
Markup
<table class="zebra-striped">
   <tr>
      <th>Employee</th>
      <th>Apples</th>
      <th>Oranges</th>
   </tr>
   <tr>
      <td>Alice</td>
      <td>10</td>
      <td>0</td>
   </tr>
   <tr>
      <td>Bob</td>
      <td>0</td>
      <td>10</td>
   </tr>
   <tr>
      <td>Carol</td>
      <td>2</td>
      <td>13</td>
   </tr>
   <tr>
      <td>Dave</td>
      <td>23</td>
      <td>4</td>
   </tr>
</table>
Source: base/tables.less, line 53

2.6 #permalink Z-index

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Should generally be used sparingly, but when necessary, please define the class here before using it on your page to minimize the potential for unexpected conflicts.

Example
Markup:
Markup
Markup:
Source: base/zindex.less, line 2

2.7.1 #permalink Flex goodies

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Because our css stack is based on flex elements (see the definitions of grid-parent and grid-xx), and browser support is now good enough, we can use some of the advanced layout techniques present in the flex spec.

Example
Markup:
Markup
Markup:
Source: layout/flex.less, line 1

2.7.2 #permalink growChildren

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Here's a nice little hack to allow your elements to fill vertical space. Helpful when you have two columns of slightly different height that you want to align vertically. Previously we would have done this with the equalHeight javascript.

The trick is to change the parent's flex-direction to column (note that the parent must have grid-parent!), then to apply flex-grow:1 to the children you want to grow to fill the empty space.

Example

The problem:

a short column
a taller column
a taller column

The solution:

a short column
a taller column
a taller column

By adding flex_grow1 to all children the extra space will be distributed among all children:

The first thing that's short
The second thing that's also short
The third thing. still short
Now here comes another list and the things in it are longer
Yep, the things in this list are longer. I guess we just had more to say.
This third one could be super long, and it'll just happily take up as much space as it needs to to fit all the content in it. And its friends over there on the left, they'll all just grow to distribute the extra space in their column. Neat!

You can even selectively grow only some components so other things stay lined up:

The heading
a little bit of content
The heading
way more content I mean like a lot this white box could get really tall, you guys.

but seriously can you even imagine how tall this box could get? what's the biggest number, like 8? it could be 8 lines tall.

Note that I've just been using these classes on the smaller side, but for maximum flexibility (especially if the content is user-generated), better to put them on both sides.

Markup
<h4>The problem:</h4>
<div class="grid-parent col_ggSecondary1Dark">
  <div class="grid-6 box_padded1"><div class="grid-12 col_white">a short column</div></div>
  <div class="grid-6 box_padded1"><div class="grid-12 col_white">a taller column<br/>a taller column</div></div>
</div>
<h4>The solution:</h4>
<div class="grid-parent col_ggSecondary1Dark">
  <div class="grid-6 box_padded1 grid-parent flex_growChildren"><div class="grid-12 col_white flex_grow1">a short column</div></div>
  <div class="grid-6 box_padded1"><div class="grid-12 col_white">a taller column<br/>a taller column</div></div>
</div>
<h4>By adding flex_grow1 to all children the extra space will be distributed among all children:</h4>
<div class="grid-parent col_ggSecondary1Dark">
  <div class="grid-6 box_padded1 grid-parent flex_growChildren">
    <div class="grid-12 col_ggPrimary1 col_whiteText layout_center box_padded1 grid-parent layout_centerVertical flex_grow1">
      <div>The first thing that's short</div>
    </div>
    <div class="grid-12 col_ggPrimary2 col_whiteText layout_center box_padded1 grid-parent layout_centerVertical flex_grow1">
      <div>The second thing that's also short</div>
    </div>
    <div class="grid-12 col_ggPrimary3 col_whiteText layout_center box_padded1 grid-parent layout_centerVertical flex_grow1">
      <div>The third thing. still short</div>
    </div>
  </div>
  <div class="grid-6 box_padded1 grid-parent">
    <div class="grid-12 col_ggPrimary1 col_whiteText layout_center box_padded1">
      <div>Now here comes another list and the things in it are longer</div>
    </div>
    <div class="grid-12 col_ggPrimary2 col_whiteText layout_center box_padded1">
      <div>Yep, the things in this list are longer. I guess we just had more to say.</div>
    </div>
    <div class="grid-12 col_ggPrimary3 col_whiteText layout_center box_padded1">
      <div>This third one could be super long, and it'll just happily take up as much space as it needs to to fit all the content in it. And its friends over there on the left, they'll all just grow to distribute the extra space in their column. Neat!</div>
    </div>
  </div>
</div>
<h4>You can even selectively grow only some components so other things stay lined up:</h4>
<div class="grid-parent col_ggSecondary1Dark">
  <div class="grid-6 box_padded1 grid-parent flex_growChildren">
    <div class="grid-12 col_ggPrimary1 col_whiteText layout_center box_padded1">The heading</div>
    <div class="grid-12 col_white box_padded1 layout_center grid-parent layout_centerVertical flex_grow1">
      <div>a little bit of content</div>
    </div>
    <div class="grid-12 col_ggPrimary2 col_whiteText layout_center box_padded1"><a href="" class="btn">the cta</a></div>
  </div>
  <div class="grid-6 box_padded1 grid-parent flex_growChildren">
    <div class="grid-12 col_ggPrimary1 col_whiteText layout_center box_padded1">The heading</div>
    <div class="grid-12 col_white box_padded1 layout_center flex_grow1">
      way more content I mean like a lot this white box could get really tall, you guys.
      <br/><br/>
      but seriously can you even imagine how tall this box could get? what's the biggest number, like 8? it could be 8 lines tall.
    </div>
    <div class="grid-12 col_ggPrimary2 col_whiteText layout_center box_padded1"><a href="" class="btn">the cta</a></div>
  </div>
</div>
<h4>Note that I've just been using these classes on the smaller side, but for maximum flexibility (especially if the content is user-generated), better to put them on both sides.
Source: layout/flex.less, line 12
Example
Markup:
Markup
Markup:
Source: layout/flex.less, line 82