Tests for @superflycss/component-grid

Grid is applied.

                 

<div class="Grid">
  <div>
    <div class="TestBox">1</div>
  </div>
  <div>
    <div class="TestBox u-border-top-style-none">2</div>
  </div>
</div>

Cells are rendered at full-width by default.

1

2

Grid is applied.

                 

<div class="Grid Grid--withGutter">
  <div class="u-lg-size1of4">
    <div class="TestBox">1</div>
  </div>
  <div class="u-lg-size1of4">
    <div class="TestBox">2</div>
  </div>
  <div class="u-lg-size1of4">
    <div class="TestBox">3</div>
  </div>
  <div class="u-lg-size1of4">
    <div class="TestBox">4</div>
  </div>
</div>

Cells are rendered with the sizing utility applied when the viewport is large otherwise they are full width.

1

2

3

4

Grid is applied.

                 

<div class="Grid Grid--withGutter">
  <div class="u-md-size1of2 u-lg-size1of4">
    <div class="TestBox">1</div>
  </div>
  <div class="u-md-size1of2 u-lg-size1of4 ">
    <div class="TestBox u-border-top-style-none u-md-border-top-style-solid">2</div>
  </div>
  <div class="u-md-size1of2  u-lg-size1of4">
    <div class="TestBox u-border-top-style-none  u-lg-border-top-style-solid">3</div>
  </div>
  <div class="u-md-size1of2 u-lg-size1of4">
    <div class="TestBox u-border-top-style-none u-lg-border-top-style-solid">4</div>
  </div>
</div>

Cells are rendered with the sizing utility applied when the viewport is large otherwise they are full width.

1

2

3

4

Grid is applied.

                 

<div class="Grid">
  <div class="u-size1of4">
    <div class="TestBoxLeft">1</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBoxLeft">2</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBoxLeft">3</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBox">4</div>
  </div>
</div>

inter-cell whitespace is removed.

1

2

3

4

Grid is applied.

                 

    <div class="Grid">
      <div class="u-size1of2">
        <div class="TestBoxLeft">
<pre>This is some really really really really really long content that should be scrolled when the container is too small.</pre>
        </div>
      </div>
      <div class="u-size1of2">
        <div class="TestBox">
<pre>This is some really really really really really long content that should be scrolled when the container is too small.</pre>
        </div>
      </div>
    </div>

overflowing elements are scrolled.

This is some really really really really really long content that should be scrolled when the container is too small.

This is some really really really really really long content that should be scrolled when the container is too small.

Grid is applied.

                 

  <div class="Grid">
      <div class="u-size1of4">
        <div class="TestBoxLeft">1</div>
      </div>
      <div class="u-size1of4">
        <div class="TestBoxLeft">2</div>
      </div>
      <div class="u-size1of4">
        <div class="TestBoxLeft">3</div>
      </div>
      <div class="u-size1of4">
        <div class="TestBox">4</div>
      </div>
      <div class="u-size1of4">
        <div class="TestBoxBottomLeft">5</div>
      </div>
      <div class="u-size1of4">
        <div class="TestBoxBottomLeft">6</div>
      </div>
      <div class="u-size1of4">
        <div class="TestBoxBottomLeft">7</div>
      </div>
      <div class="u-size1of4">
        <div class="TestBoxBottom">8</div>
      </div>
    </div>

cells automatically wrap across multiple lines when they don't fit a single row.

1

2

3

4

5

6

7

8

Grid is applied.

                 

<div class="Grid">
    <div class="u-size1of4">
      <div class="TestBox u-min-height-8rem">1</div>
    </div>
    <div class="u-size1of4">
      <div class="TestBox u-min-height-4rem">2</div>
    </div>
    <div class="u-size1of4">
      <div class="TestBox u-min-height-8rem">3</div>
    </div>
    <div class="u-size1of4">
      <div class="TestBox u-min-height-4rem">4</div>
    </div>
    <div class="u-size1of4">
      <div class="TestBox u-min-height-8rem">5</div>
    </div>
    <div class="u-size1of4">
      <div class="TestBox u-min-height-4rem">6</div>
    </div>
    <div class="u-size1of4">
      <div class="TestBox u-min-height-8rem">7</div>
    </div>
    <div class="u-size1of4">
      <div class="TestBox u-min-height-4rem">8</div>
    </div>
</div>

cells of different heights are arranged into clear rows.

1

2

3

4

5

6

7

8

Grid is applied.

                 

<div class="Grid">
  <div class="u-size3of4">
    <div class="TestBox">
      Level 1
      <div class="Grid">
        <div class="u-size1of3">
          <div class="TestBoxLeft u-background-color-md-grey-900">Level 2</div>
        </div>
        <div class="u-size1of3">
          <div class="TestBoxLeft u-background-color-md-grey-900">Level 2</div>
        </div>
        <div class="u-size1of3">
          <div class="TestBox u-background-color-md-grey-900">Level 2</div>
        </div>
      </div>
    </div>
  </div>
</div>

it supports nested grids.

Level 1

Level 2

Grid is applied.

                 

<div class="Grid">
  <div class="u-size1of4">
    <div class="TestBoxLeft">1/4</div>
  </div>
  <div class="u-sizeFill">
    <div class="TestBox">auto</div>
  </div>
</div>
<div class="Grid">
  <div class="u-size2of12">
    <div class="TestBoxBottomLeft">2/12</div>
  </div>
  <div class="u-sizeFill">
    <div class="TestBoxBottomLeft">auto</div>
  </div>
  <div class="u-size2of12">
    <div class="TestBoxBottom">2/12</div>
  </div>
</div>

supports u-sizeFill on cells with no width.

1/4

auto

2/12

auto

2/12

Grid is applied.

                 

<div class="Grid">
  <div class="u-sizeFit">
    <div class="TestBoxLeft">u-sizeFit</div>
  </div>
  <div class="u-sizeFill">
    <div class="TestBox">u-sizeFill</div>
  </div>
</div>

supports u-sizeFit and u-sizeFill.

u-sizeFit

u-sizeFill

Grid--fill is applied.

                 

<div class="Grid Grid--fill">
  <div>
    <div class="TestBoxLeft">1</div>
  </div>
  <div>
    <div class="TestBoxLeft">2</div>
  </div>
  <div>
    <div class="TestBox">3</div>
  </div>
</div>
<div class="Grid Grid--fill">
  <div>
    <div class="TestBoxBottomLeft">1</div>
  </div>
  <div>
    <div class="TestBoxBottomLeft">2</div>
  </div>
  <div>
    <div class="TestBoxBottomLeft">3</div>
  </div>
  <div>
    <div class="TestBoxBottomLeft">4</div>
  </div>
  <div>
    <div class="TestBoxBottomLeft">5</div>
  </div>
  <div>
    <div class="TestBoxBottom">6</div>
  </div>
</div>

evenly distribute space between cells without sizing classes.

1

2

3

1

2

3

4

5

6

Grid--fit is applied.

                 

<div class="Grid Grid--fit TestCanvas">
  <div>
    <div class="TestBoxLeft">1<br> Lorem ipsum dolor sit amet</div>
  </div>
  <div>
    <div class="TestBoxLeft">2<br> dolor sit amet</div>
  </div>
  <div>
    <div class="TestBox">3<br> consectetur adipiscing elit</div>
  </div>
</div>
<div class="Grid Grid--fit Grid--alignCenter">
  <div class="u-size1of3">
    <div class="TestBox u-sizeFill">1<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.</div>
  </div>
  <div>
    <div class="TestBoxRight u-sizeFill">2<br> dolor sit amet</div>
  </div>
  <div>
    <div class="TestBoxRight u-sizeFill">3<br> consectetur adipiscing elit</div>
  </div>
</div>

it fits cells to their content.

1
Lorem ipsum dolor sit amet

2
dolor sit amet

3
consectetur adipiscing elit

1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.

2
dolor sit amet

3
consectetur adipiscing elit

Grid--alignCenter is applied.

                 

<div class="Grid Grid--alignCenter">
  <div class="u-size1of3">
    <div class="TestBoxLeft">1</div>
  </div>
  <div class="u-size1of3">
    <div class="TestBox">2</div>
  </div>
  <div class="u-size1of2">
    <div class="TestBoxBottom">3</div>
  </div>
</div>

all grid cells are center-aligns but not their content.

1

2

3

Grid--alignRight is applied.

                 

<div class="Grid Grid--alignRight">
  <div class="u-size1of4">
    <div class="TestBoxLeft">1</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBoxLeft">2</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBox">3</div>
  </div>
</div>

all grid cells are right-aligned but not their content.

1

2

3

Grid--alignMiddle is applied.

                 

<div class="Grid Grid--alignMiddle">
  <div class="u-size1of4">
    <div class="TestBoxLeft">1</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBox u-height-8rem">2</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBoxRight">3</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBoxRight">4</div>
  </div>
</div>

all grid cells are middle-aligned.

1

2

3

4

Grid--alignBottom is applied.

                 

<div class="Grid Grid--alignBottom">
  <div class="u-size1of4">
    <div class="TestBoxLeft">1</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBox u-height-8rem">2</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBox">3</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBox">4</div>
  </div>
</div>

all grid cells are bottom-aligned.

1

2

3

4

Grid--equalHeight is applied.

                 

<div class="Grid Grid--equalHeight">
  <div class="u-size1of3">
    <div class="TestBoxLeft u-sizeFill">1</div>
  </div>
  <div class="u-size1of3">
    <div class="TestBoxLeft u-sizeFill">2<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.</div>
  </div>
  <div class="u-size1of3">
    <div class="TestBox u-sizeFill">3</div>
  </div>
</div>

equal height columns are rendered based on tallest cell.

1

2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.

3

Grid u-flexExpand is applied.

                 

<div class="Grid">
  <div class="u-size1of2">
    <div class="TestBoxLeft">1</div>
  </div>
  <div class="u-size1of2">
    <div class="TestBox">2</div>
  </div>
  <div class="u-size3of4 u-flex-expand-left u-flex-expand-right">
    <div class="TestBoxBottom">3: centered cell</div>
  </div>
  <div class="u-size3of4 u-flex-expand-right">
    <div class="TestBoxBottom">4: left aligned cell</div>
  </div>
  <div class="u-size3of4 u-flex-expand-left">
    <div class="TestBoxBottom">4: right aligned cell</div>
  </div>
</div>

Align an individual grid cell but not its content

1

2

3: centered cell

4: left aligned cell

4: right aligned cell

Grid u-flexJustify is applied.

                 

<div class="Grid">
  <div class="u-size1of2">
    <div class="TestBoxLeft">1</div>
  </div>
  <div class="u-size1of2">
    <div class="TestBox">2</div>
  </div>
  <div class="u-flex u-flex-justify-center">
    <div class="TestBoxBottom u-size3of4">3: centered cell</div>
  </div>
  <div class="u-flex u-flex-justify-start">
    <div class="TestBoxBottom u-size3of4">4: left aligned cell</div>
  </div>
  <div class="u-flex u-flex-justify-end">
    <div class="TestBoxBottom u-size3of4">5: right aligned cell</div>
  </div>
</div>

Align an individual grid cell but not its content

1

2

3: centered cell

4: left aligned cell

5: right aligned cell

Grid--withGutter is applied.

                 

<div class="Grid Grid--withGutter">
  <div class="u-size1of4">
    <div class="TestBox">1</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBox">2</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBox">3</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBox">4</div>
  </div>
</div>

Renders gutters

1

2

3

4

Grid--withGutter is applied.

                 

<div class="Grid Grid--withGutter">
  <div class="u-size1of2">
    <div class="TestCanvas">
      Level 1
      <div class="Grid">
        <div class="u-size1of2">
          <div class="TestBox">Level 2</div>
        </div>
        <div class="u-size1of2">
          <div class="TestBox">Level 2</div>
        </div>
      </div>
    </div>
  </div>
  <div class="u-size1of2">
    <div class="TestCanvas">
      Level 1
      <div class="Grid">
        <div class="u-size1of2">
          <div class="TestBox">Level 2</div>
        </div>
        <div class="u-size1of2">
          <div class="TestBox">Level 2</div>
        </div>
      </div>
    </div>
</div>
</div>

it doesn't apply gutters to nested grids

Level 1

Level 2

Level 1

Level 2

Grid--withGutter is applied.

                 

<div class="Grid Grid--withGutter">
  <div class="u-size1of4">
    <div class="TestBox">1</div>
  </div>
  <div class="u-before1of4 u-size1of4">
    <div class="TestBox">2</div>
  </div>
  <div class="u-size1of4">
    <div class="TestBox">3</div>
  </div>
</div>
<div class="Grid Grid--withGutter">
  <div class="u-before1of2">
    <div class="TestBoxBottom">1</div>
  </div>
</div>

it correctly aligns gutters when using offsets

1

2

3

1

Grid--withGutter is applied.

                 

<div class="Grid Grid--withGutter">
  <div class="u-size1of2">
    <div class="TestCanvas">
      Level 1
      <div class="Grid Grid--withGutter">
        <div class="u-size1of2">
          <div class="TestBox">Level 2</div>
        </div>
        <div class="u-size1of2">
          <div class="TestBox">Level 2</div>
        </div>
      </div>
    </div>
  </div>
  <div class="u-size1of2">
    <div class="TestCanvas">
      Level 1
      <div class="Grid Grid--withGutter">
        <div class="u-size1of2">
          <div class="TestBox">Level 2</div>
        </div>
        <div class="u-size1of2">
          <div class="TestBox">Level 2</div>
        </div>
      </div>
    </div>
</div>
</div>

correctly aligns gutters within nested grids

Level 1

Level 2

Level 1

Level 2

Grid--fill is applied.

                 

    <div class="Grid Grid--withGutter Grid--fill">
      <div>
        <div class="TestBox">1</div>
      </div>
      <div>
        <div class="TestBox">2</div>
      </div>
      <div>
        <div class="TestBox">3</div>
      </div>
    </div>
    <div class="Grid Grid--withGutter Grid--fill">
      <div>
        <div class="TestBox">1</div>
      </div>
      <div>
        <div class="TestBox">2</div>
      </div>
    </div>

correctly adds gutters with Grid--fill

1

2

3

1

2

Grid--fill is applied.

                 

 <div class="Grid Grid--withGutter Grid--fit">
   <div>
     <div class="TestBox">Lorem ipsum dolor sit amet, Lorem ipsum.</div>
   </div>
   <div>
     <div class="TestBox">Lorem ipsum dolor sit amet, consectetur.</div>
   </div>
   <div>
     <div class="TestBox">Lorem ipsum.</div>
   </div>
 </div>

correctly adds gutters with Grid--fit

Lorem ipsum dolor sit amet, Lorem ipsum.

Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.