Media WebUI

Flow Columns

Flow column classes use the CSS columns property, with column-width set to the default of "auto", and no column gap. Basic columns are available in WebUI to enable the creation of masonry style layouts. Since WebUI provides many spacing and padding utilities it was thought that the column-gap property provided little additional benefit.

Similar to the grid system, the maximum number of columns available is 20. Column are implemented by using one of the flow-col-* classes. The format is flow-col-[column count]

There is also a full set of responsive classes allowing you to specify the column count at specific breakpoints. The format is flow-col-[column count]-bp-[breakpoint]-[direction]. See the example below.

Example
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Header
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Header
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Header
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Header
Sed dignissim lacinia nunc. Curabitur tortor.
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Header
Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
Header
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
Markup
<div class="flow-col-4 flow-col-2-bp-2-under flow-col-3-bp-3-under col-padding-md text-sm">
  <div class="container pad-bottom-md nobreak">
    <div class="table-row">
      <div class="table-col-20 accent-1"><span>Header</span></div>
    </div>   
    <div class="table-row flex-auto">
      <div class="table-col-20 light">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
      </div>
    </div>
  </div>
  <div class="container pad-bottom-md nobreak">
    <div class="table-row">
      <div class="table-col-20 accent-1"><span>Header</span></div>
    </div>   
    <div class="table-row flex-auto">
      <div class="table-col-20 light">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="container pad-bottom-md nobreak">
    <div class="table-row">
      <div class="table-col-20 accent-1"><span>Header</span></div>
    </div>   
    <div class="table-row flex-auto">
      <div class="table-col-20 light">
        Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. 
        Mauris massa.
      </div>
    </div>
  </div>
  <div class="container pad-bottom-md nobreak">
    <div class="table-row">
      <div class="table-col-20 accent-1"><span>Header</span></div>
    </div>   
    <div class="table-row flex-auto">
      <div class="table-col-20 light">
        Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. 
        Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. 
        Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
      </div>
    </div>
  </div>
  <div class="container pad-bottom-md nobreak">
    <div class="table-row">
      <div class="table-col-20 accent-1"><span>Header</span></div>
    </div>   
    <div class="table-row flex-auto">
      <div class="table-col-20 light">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="container pad-bottom-md nobreak">
    <div class="table-row">
      <div class="table-col-20 accent-1"><span>Header</span></div>
    </div>   
    <div class="table-row flex-auto">
      <div class="table-col-20 light">
        Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. 
        Mauris massa.
      </div>
    </div>
  </div>
  <div class="container pad-bottom-md nobreak">
    <div class="table-row">
      <div class="table-col-20 accent-1"><span>Header</span></div>
    </div>   
    <div class="table-row flex-auto">
      <div class="table-col-20 light">
        Sed dignissim lacinia nunc. Curabitur tortor.
      </div>
    </div>
  </div>
  <div class="container pad-bottom-md nobreak">
    <div class="table-row">
      <div class="table-col-20 accent-1"><span>Header</span></div>
    </div>   
    <div class="table-row flex-auto">
      <div class="table-col-20 light">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="container pad-bottom-md nobreak">
    <div class="table-row">
      <div class="table-col-20 accent-1"><span>Header</span></div>
    </div>   
    <div class="table-row flex-auto">
      <div class="table-col-20 light">
        Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, 
        luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. 
      </div>
    </div>
  </div>
  <div class="container pad-bottom-md nobreak">
    <div class="table-row">
      <div class="table-col-20 accent-1"><span>Header</span></div>
    </div>   
    <div class="table-row flex-auto">
      <div class="table-col-20 light">
        Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. 
        Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. 
        Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
      </div>
    </div>
  </div>
</div>