Grid

Completly Fluid

This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.

Six columns

Six columns

Four columns

Four columns

Four columns

Page info

In this page you can learn how to create columns on paraGRIDma v2.

Panel Types

You can create several types of panels:

  • Completly Fluid

    They must have a class from g1 to g12.
    They must be inside of a <div class="row">

  • Fluid keeping columns

    Each element inmediatly inside this panel will be display as a colum
    The parent div must have a class: bg1, bg2, bg3, bg4 or bg5

One

Eleven columns

Two columns

Ten columns

Three columns

Nine columns

Four columns

Eight columns

Five columns

Seven columns

Six columns

Six columns

Seven columns

Fix columns

Eight columns

Four columns

Nine columns

Three columns

Ten columns

Two columns

Eleven columns

One

Twelve columns

Conditonals Panels

This panel is only visible on phones

This panel is only hidden on phones

This panel is only visible on desktops

This panel is only hidden on desktops

Fluid keeping columns (break on mobile)

Two-up
    Two-up element
    Two-up element
    Two-up element
    Two-up element
    Two-up element
Four-up
    Two-up element
    Two-up element
    Two-up element
    Two-up element
    Two-up element

Fluid keeping columns (even on mobile)

Two-up
    Two-up element
    Two-up element
    Two-up element
    Two-up element
    Two-up element
Four-up
    Two-up element
    Two-up element
    Two-up element
    Two-up element
    Two-up element

Fluid keeping columns info

  • empty

Fixed Block (always)

FLUID: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus, ac egestas augue laoreet a. Quisque varius ligula non est porta sit amet dictum orci consequat. Morbi pellentesque luctus ligula, sit amet vehicula sapien imperdiet a. Suspendisse sed lacus at eros tristique vehicula eget sit amet sem.
FLUID: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus, ac egestas augue laoreet a. Quisque varius ligula non est porta sit amet dictum orci consequat. Morbi pellentesque luctus ligula, sit amet vehicula sapien imperdiet a. Suspendisse sed lacus at eros tristique vehicula eget sit amet sem.

Fixed Block (break on mobile)

FLUID: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus, ac egestas augue laoreet a. Quisque varius ligula non est porta sit amet dictum orci consequat. Morbi pellentesque luctus ligula, sit amet vehicula sapien imperdiet a. Suspendisse sed lacus at eros tristique vehicula eget sit amet sem.
FLUID: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus, ac egestas augue laoreet a. Quisque varius ligula non est porta sit amet dictum orci consequat. Morbi pellentesque luctus ligula, sit amet vehicula sapien imperdiet a. Suspendisse sed lacus at eros tristique vehicula eget sit amet sem.

Fixed Block info

  • empty

Centered Panels

8 columns CENTERED
6 columns CENTERED
4 columns CENTERED

Centered Panels info

  • empty