Fluid Grid Container

Flexibility & Ease of Design With All Devices

Rule of Thumb

The grid set family can reside within a liquid containing block without losing it flow property and still maintain its balance when shrunk or change with different breakpoints. Learn more about fluid container.

The best column structure combinations that work perfectly well without a recourse to tweaking are 2,3,4 columns combination.

General Setup

Fluid Width 50%

The identifier is the container-liquid-50, learn more about container.

 
    <div class="container-liquid-50">
      <div class="row ">
        <!-- Two mixed sample -->
        <div class="g16-mc-8"></div>
        <div class="g16-mc-8"></divpx>
      </div>
    </div>

Fluid Width 70%

The identifier is the container-liquid-70, learn more about container.

 
    <div class="container-liquid-70">
      <div class="row ">
        <!-- Two mixed sample -->
        <div class="g16-mc-8"></div>
        <div class="g16-mc-8"></divpx>
      </div>
    </div>

Liquid Width 80%

The identifier is the container-liquid-80, learn more about container.

 
    <div class="container-liquid-80">
      <div class="row ">
        <!-- Two mixed sample -->
        <div class="g16-mc-8"></div>
        <div class="g16-mc-8"></divpx>
      </div>
    </div>

Liquid Width 100%

The identifier is the container-liquid-100, learn more about container.

 
    <div class="container-liquid-100">
      <div class="row ">
        <!-- Two mixed sample -->
        <div class="g16-mc-8"></div>
        <div class="g16-mc-8"></divpx>
      </div>
    </div>

50%

70% Liquid Container

80% Liquid Container

100% liquid container