Grid system

Example

<div class="container">
    <div class="row">
        <div class="col-ex-3">One of four columns</div>
        <div class="col-ex-3">One of four columns</div>
        <div class="col-ex-3">One of four columns</div>
        <div class="col-ex-3">One of four columns</div>
    </div>
</div>

The above example creates four equal-width columns accross all devices and viewport using our predefined grid classes. Those columns are centered in the page with the parent container class

Our Grid System

Fire UI's grid system comes with row, col- and col-ex- classes. This is how it's work:

• A row contains of 12 columns. These columns allow you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-3 spans 3 columns)
• col- class. This column class will automatically resize it size when it meets smaller screen. For example, col-3 class which is supposed to span 3 columns, will span 6 column(half of the width) when screen width is lower than 768 px and will take span 12 columns when screen width is lower than 600px. Example:
  One of four columns

  One of four columns

  One of four columns

  One of four columns

  <div class="row">
      <div class="col-3">One of four columns</div>
      <div class="col-3">One of four columns</div>
      <div class="col-3">One of four columns</div>
      <div class="col-3">One of four columns</div>
  </div>

  To view this differents, open developer console and try resize your screen width

• col-ex- class. Unlike col- class which automatically resize, this col-ex will not increase number of column to span. For instance, col-4 will span 4 columns regardless screen width.

Example of combinations