Columns

Columns form the backbone of your layout system, providing a flexible grid structure for organizing content. In Flow CSS, the grid system is based on a total of 12 columns, allowing you to easily create responsive layouts.

Usage

To use columns, simply add the appropriate classes to your HTML elements.

Output:

Column 1

Column 2

Column 3

Column 4

            
<div class="container">
  <div class="col-lg-4">
    <div class="group">
      <!-- Your content goes here -->
    </div>
    <div class="group">
      <!-- Your content goes here -->
    </div>
    <div class="group">
      <!-- Your content goes here -->
    </div>
    <div class="group">
      <!-- Your content goes here -->
    </div>
  </div>
</div>
            
          

NOTE: This code creates a column with Four groups in it. On large screens, both groups will be displayed side by side.

Responsive Columns

You can specify different column sizes for different screen sizes using responsive classes.

Output:

Column 1

Column 2

Column 3

Column 4

            
<div class="container">
  <div class="col-lg-4 col-md-3 col-sm-2">
    <div class="group">
      Column 1
    </div>
    <div class="group">
      Column 2
    </div>
    <div class="group">
      Column 3
    </div>
    <div class="group">
      Column 4
    </div>
  </div>
</div>
            
          

NOTE: In this example, the column will display Four groups side by side on large screens and three groups side by side on medium screens and two groups side by side on small screens.