<!-- Default -->
<h2 class="label">Simple Grid - Auto Fit</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column csu-green">
        <p>
            <div class="square5"></div>
        </p>
    </div>
    <div class="flex-column csu-grey">
        <p></p>
    </div>
    <div class="flex-column csu-blue">
        <p></p>
    </div>
    <div class="flex-column csu-red">
        <p></p>
    </div>
</div>

<!-- Alignment -->
<h2 class="label">Align Vertical</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column flex-container flex-start square5 csu-grey ">
        <h5>Start</h5>
    </div>
    <div class="flex-column flex-container flex-center square5 csu-green">
        <h5>Center</h5>
    </div>
    <div class="flex-column flex-container flex-end square5 csu-blue">
        <h5>End</h5>
    </div>
</div>

<!-- Alignment -->
<h2 class="label">Align Horizontal</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column flex-container flex-center flex-align-start square5 csu-grey ">
        <h5>Start</h5>
    </div>
    <div class="flex-column flex-container flex-center flex-align-center square5 csu-green">
        <h5>Center</h5>
    </div>
    <div class="flex-column flex-container flex-center flex-align-end square5 csu-blue">
        <h5>End</h5>
    </div>
</div>

<!-- Thirds -->
<h2 class="label">Thirds Layout - Left</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column csu-green">
        <p>
            <div class="square5"></div>
        </p>
    </div>
    <div class="flex-column-2 csu-grey">
        <p></p>
    </div>
</div>

<!-- Thirds -->
<h2 class="label">Thirds Layout - Right</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column-2 csu-green">
        <p>
            <div class="square5"></div>
        </p>
    </div>
    <div class="flex-column csu-grey">
        <p></p>
    </div>
</div>

<!-- Thirds -->
<h2 class="label">Three Quarter Layout - Left</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column csu-green">
        <p>
            <div class="square5"></div>
        </p>
    </div>
    <div class="flex-column-3 csu-grey">
        <p></p>
    </div>
</div>

<!-- Thirds -->
<h2 class="label">Three Quarter Layout - Right</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column-3 csu-green">
        <p>
            <div class="square5"></div>
        </p>
    </div>
    <div class="flex-column csu-grey">
        <p></p>
    </div>
</div>

<!-- Content -->
<h2 class="label">Example - Halves Layout</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column">
        <figure class="featured"><img src="../../images/landscape.jpg"></figure>
    </div>
    <div class="flex-column ">
        <p>How much will it cost it looks a bit empty, try to make everything bigger thanks for taking the time to make the website, but i already made it in wix can we try some other colours maybe. <br />I have an awesome idea for a startup, i need you
            to build it for me make it sexy, that's great, but can you make it work for ie 2 please we are your relatives can we have another option. Could you rotate the picture to show the other side of the room?</p>
    </div>
</div>

<!-- Content -->
<h2 class="label">Example - Thirds Layout - Left</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column">
        <figure class="featured"><img src="../../images/landscape.jpg"></figure>
    </div>
    <div class="flex-column-2 ">
        <p>How much will it cost it looks a bit empty, try to make everything bigger thanks for taking the time to make the website, but i already made it in wix can we try some other colours maybe. <br />I have an awesome idea for a startup, i need you
            to build it for me make it sexy, that's great, but can you make it work for ie 2 please we are your relatives can we have another option. Could you rotate the picture to show the other side of the room?</p>
    </div>
</div>

<!-- Content -->
<h2 class="label">Example - Thirds Layout - Right</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column-2">
        <figure class="featured"><img src="../../images/landscape.jpg"></figure>
    </div>
    <div class="flex-column ">
        <p>How much will it cost it looks a bit empty, try to make everything bigger thanks for taking the time to make the website, but i already made it in wix can we try some other colours maybe. <br />I have an awesome idea for a startup, i need you
            to build it for me make it sexy, that's great, but can you make it work for ie 2 please we are your relatives can we have another option. Could you rotate the picture to show the other side of the room?</p>
    </div>
</div>

<!-- Content -->
<h2 class="label">Example - 3/4 Layout - Left</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column">
        <figure class="featured"><img src="../../images/landscape.jpg"></figure>
    </div>
    <div class="flex-column-3 ">
        <p>How much will it cost it looks a bit empty, try to make everything bigger thanks for taking the time to make the website, but i already made it in wix can we try some other colours maybe. <br />I have an awesome idea for a startup, i need you
            to build it for me make it sexy, that's great, but can you make it work for ie 2 please we are your relatives can we have another option. Could you rotate the picture to show the other side of the room?</p>
    </div>
</div>

<!-- Content -->
<h2 class="label">Example - 3/4 Layout - Right</h2>

<p></p>

<div class="flex-row">
    <div class="flex-column-3">
        <figure class="featured"><img src="../../images/landscape.jpg"></figure>
    </div>
    <div class="flex-column ">
        <p>How much will it cost it looks a bit empty, try to make everything bigger thanks for taking the time to make the website, but i already made it in wix can we try some other colours maybe. <br />I have an awesome idea for a startup, i need you
            to build it for me make it sexy, that's great, but can you make it work for ie 2 please we are your relatives can we have another option. Could you rotate the picture to show the other side of the room?</p>
    </div>
</div>

<!-- Default -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column{{ column-1 }} csu-green">
    <p><div class="square5"></div></p>
  </div>
  <div class="flex-column{{ column-2 }} csu-grey">
    <p></p>
  </div>
  <div class="flex-column{{ column-1 }} csu-blue">
    <p></p>
  </div>
  <div class="flex-column{{ column-2 }} csu-red">
    <p></p>
  </div>
</div>

<!-- Alignment -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column flex-container {{ alignment-1 }} square5 csu-grey ">
    <h5>Start</h5>
  </div>
  <div class="flex-column flex-container {{ alignment-2 }} square5 csu-green">
    <h5>Center</h5>
  </div>
  <div class="flex-column flex-container {{ alignment-3 }} square5 csu-blue">
    <h5>End</h5>
  </div>
</div>

<!-- Alignment -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column flex-container {{ alignment-1 }} square5 csu-grey ">
    <h5>Start</h5>
  </div>
  <div class="flex-column flex-container {{ alignment-2 }} square5 csu-green">
    <h5>Center</h5>
  </div>
  <div class="flex-column flex-container {{ alignment-3 }} square5 csu-blue">
    <h5>End</h5>
  </div>
</div>

<!-- Thirds -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column{{ column-1 }} csu-green">
    <p><div class="square5"></div></p>
  </div>
  <div class="flex-column{{ column-2 }} csu-grey">
    <p></p>
  </div>
</div>

<!-- Thirds -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column{{ column-1 }} csu-green">
    <p><div class="square5"></div></p>
  </div>
  <div class="flex-column{{ column-2 }} csu-grey">
    <p></p>
  </div>
</div>

<!-- Thirds -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column{{ column-1 }} csu-green">
    <p><div class="square5"></div></p>
  </div>
  <div class="flex-column{{ column-2 }} csu-grey">
    <p></p>
  </div>
</div>

<!-- Thirds -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column{{ column-1 }} csu-green">
    <p><div class="square5"></div></p>
  </div>
  <div class="flex-column{{ column-2 }} csu-grey">
    <p></p>
  </div>
</div>

<!-- Content -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column{{ column-1 }}">
    <figure class="featured"><img src="{{ path image }}"></figure>
  </div>
  <div class="flex-column{{ column-2 }} ">
    <p>{{{ text }}}</p>
  </div>
</div>

<!-- Content -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column{{ column-1 }}">
    <figure class="featured"><img src="{{ path image }}"></figure>
  </div>
  <div class="flex-column{{ column-2 }} ">
    <p>{{{ text }}}</p>
  </div>
</div>

<!-- Content -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column{{ column-1 }}">
    <figure class="featured"><img src="{{ path image }}"></figure>
  </div>
  <div class="flex-column{{ column-2 }} ">
    <p>{{{ text }}}</p>
  </div>
</div>

<!-- Content -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column{{ column-1 }}">
    <figure class="featured"><img src="{{ path image }}"></figure>
  </div>
  <div class="flex-column{{ column-2 }} ">
    <p>{{{ text }}}</p>
  </div>
</div>

<!-- Content -->
<h2 class="label">{{ modifier }}</h2>

<p>{{notes}}</p>

<div class="flex-row">
  <div class="flex-column{{ column-1 }}">
    <figure class="featured"><img src="{{ path image }}"></figure>
  </div>
  <div class="flex-column{{ column-2 }} ">
    <p>{{{ text }}}</p>
  </div>
</div>

A DIV has a flex-row class applied to it and then you place DIVs with flex-column attributes inside. By default these columns will resize to fit - but additional classes for 2x & 3x make it easy to create simple grids based on thirds and quarters. Modifiers can be added to any column to resize it.