PatternLab (1.0.46)

Simple Responsive Grid ​

WARNING

Based on Gridlex (which is based on Flexbox). We used this because of missing CSS grid compatibility of Internet Explorer, should be replaced by CSS grid with better Naming in the future!

See Gridlex Documentation for more examples.

1. Basics ​

Just add a class .grid-* (from -1 to -12) to specify the number of columns in a grid. 12 columns are the default.

grid-1

grid-2

grid-2

Show Code
html
<div class="grid-1">
  <div class="col">
    <div class="-demo"><p>grid-1</p></div>
  </div>
</div>
<div class="grid-2">
  <div class="col">
    <div class="-demo"><p>grid-2</p></div>
  </div>
  <div class="col">
    <div class="-demo"><p>grid-2</p></div>
  </div>
</div>

Responsive Class Modifiers ​

Example ​

  • .grid-3_xs-1 means that on small screens, the grid will have 1 column, and on larger screens, it will have 3 columns.
  • Screens are defined as follows: xs (extra small), sm (small), md (medium), lg (large).

grid-3

 

 

grid-8

 

 

 

 

 

 

 

Show Code
html
<div class="grid-3_xs-1">
  <div class="col">
    <div class="-demo"><p>grid-3</p></div>
  </div>
  <div class="col">
    <div class="-demo"><p>&nbsp;</p></div>
  </div>
  <div class="col">
    <div class="-demo"><p>&nbsp;</p></div>
  </div>
</div>
<div class="grid-8_md-4">
  <div class="col">
    <div class="-demo"><p>grid-8</p></div>
  </div>
  <div class="col">
    <div class="-demo"><p>&nbsp;</p></div>
  </div>
  <div class="col">
    <div class="-demo"><p>&nbsp;</p></div>
  </div>
  <div class="col">
    <div class="-demo"><p>&nbsp;</p></div>
  </div>
  <div class="col">
    <div class="-demo"><p>&nbsp;</p></div>
  </div>
  <div class="col">
    <div class="-demo"><p>&nbsp;</p></div>
  </div>
  <div class="col">
    <div class="-demo"><p>&nbsp;</p></div>
  </div>
  <div class="col">
    <div class="-demo"><p>&nbsp;</p></div>
  </div>
</div>

But what happens if we have more than 3 columns in a .grid-3 ? This:

grid-1

grid-1

grid-1

grid-1

Show Code
html
<div class="grid-3_xs-1">
  <div class="col">
    <div class="-demo">
      <p>grid-1</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>grid-1</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>grid-1</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>grid-1</p>
    </div>
  </div>
</div>

2. Compose Cell by Cell ​

col-12

col-6

col-3

col-3

Show Code
html
<div class="grid">
  <div class="col-12"><div class="-demo"><p>col-12</p></div></div> <!-- first row: one column -->
  <div class="col-6"><div class="-demo"><p>col-6</p></div></div> <!-- second row: three columns (6+3+3) -->
  <div class="col-3"><div class="-demo"><p>col-3</p></div></div>
  <div class="col-3"><div class="-demo"><p>col-3</p></div></div>
</div>

3. Automatic Grid ​

Just add number of cells you want in the grid (.grid > .col):

col

col

col

col

Show Code
html
<div class="grid"> <!-- Four <div class="col"> for 4 columns in the grid -->
  <div class="col"><div class="-demo"><p>col</p></div></div>
  <div class="col"><div class="-demo"><p>col</p></div></div>
  <div class="col"><div class="-demo"><p>col</p></div></div>
  <div class="col"><div class="-demo"><p>col</p></div></div>
</div>

4. Mix all three ways ​

col

col-2_sm-12

col-6_sm-12

Show Code
html
<div class="grid">
  <div class="col"><div class="-demo"><p>col</p></div></div>
  <div class="col-2_sm-12"><div class="-demo"><p>col-2_sm-12</p></div></div>
  <div class="col-6_sm-12"><div class="-demo"><p>col-6_sm-12</p></div></div>
</div>

5. Grid Modifier Classes ​

No Gutter ​

.grid-noGutter

col-12

col-6

col-6

Show Code
html
<div class="grid-noGutter">
  <div class="col-12"><div class="-demo"><p>col-12</p></div></div>
  <div class="col-6"><div class="-demo"><p>col-6</p></div></div>
  <div class="col-6"><div class="-demo"><p>col-6</p></div></div>
</div>

Large Gutter ​

.grid-lgGutter

col

col

col

Show Code
html
<div class="grid-3-lgGutter">
  <div class="col"><div class="-demo"><p>col</p></div></div>
  <div class="col"><div class="-demo"><p>col</p></div></div>
  <div class="col"><div class="-demo"><p>col</p></div></div>
</div>

No Wrap ​

.grid-noWrap

grid-noWrap

grid-noWrap

grid-noWrap

grid-noWrap

grid-noWrap

Show Code

grid-noWrap

grid-noWrap

grid-noWrap

grid-noWrap

grid-noWrap

Equal Height Columns ​

.grid-equalHeight

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

col-4

col-4

Lorem ipsum dolor sit amet

col

col

Show Code
html
<div class="grid-equalHeight">
  <div class="col-4"><div class="-demo" style="height: 100%"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr. </p></div></div>
  <div class="col-4"><div class="-demo" style="height: 100%"><p>col-4</p></div></div>
  <div class="col-4"><div class="-demo" style="height: 100%"><p>col-4</p></div></div>
</div>
<div class="grid-5-equalHeight">
  <div class="col"><div class="-demo" style="height: 100%"><p>Lorem ipsum dolor sit amet </p></div></div>
  <div class="col"><div class="-demo" style="height: 100%"><p>col</p></div></div>
  <div class="col"><div class="-demo" style="height: 100%"><p>col</p></div></div>
</div>

Separators ​

.grid-separators

col consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

col

col

Show Code
html
<div class="grid-3-separators">
  <div class="col">
   <span>col consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span>
  </div>
  <div class="col">
    <p>col</p>
  </div>
  <div class="col">
    <p>col</p>
  </div>
</div>

Horizontal Distribution (space-between) ​

If you add spaceBetween class, the distribution will have no margin around first and last elements:

.grid-spaceBetween

A

B

C

Show Code
html
<div class="grid-spaceBetween">
  <div class="col-2">
    <div class="-demo">
      <p>A</p>
    </div>
  </div>
  <div class="col-2">
    <div class="-demo">
      <p>B</p>
    </div>
  </div>
  <div class="col-2">
    <div class="-demo">
      <p>C</p>
    </div>
  </div>
</div>

Horizontal Distribution (space-around) ​

.grid-spaceAround

A

B

C

Show Code
html
<div class="grid-spaceAround">
  <div class="col-2">
    <div class="-demo">
      <p>A</p>
    </div>
  </div>
  <div class="col-2">
    <div class="-demo">
      <p>B</p>
    </div>
  </div>
  <div class="col-2">
    <div class="-demo">
      <p>C</p>
    </div>
  </div>
</div>

Reverse order ​

Example: .grid-5-reverse

A

B

C

D

E

Show Code
html
<div class="grid-5-reverse">
  <div class="col">
    <div class="-demo">
      <p>A</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>B</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>C</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>D</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>E</p>
    </div>
  </div>
</div>

Grid Columns ​

.grid-column

A

B

C

Show Code
html
<div class="grid-column">
  <div class="col-2">
    <div class="-demo">
      <p>A</p>
    </div>
  </div>
  <div class="col-2">
    <div class="-demo">
      <p>B</p>
    </div>
  </div>
  <div class="col-2">
    <div class="-demo">
      <p>C</p>
    </div>
  </div>
</div>

6. Nesting ​

Just an "empty" col-6:

Each column can become a grid too (.col-6.grid)

col-6

col-4

col-6

col-6

col-4

col-4

col-4

Show Code
html
<div class="grid">
  <div class="col-6_sm-12"><p class="-demo-explain">Just an "empty" col-6:</p></div>
  <div class="col-6_sm-12"><p class="-demo-explain">Each column can become a grid too (<code>.col-6.grid</code>)
  </p></div>
  <div class="col-6_sm-12">
    <div class="-demo">
      <p>col-6</p>
    </div>
  </div>
  <div class="col-6_sm-12 grid">
    <div class="col-4">
      <div class="-demo">
        <p>col-4</p>
      </div>
    </div>
    <div class="col-8 grid">
      <div class="col-6">
        <div class="-demo">
          <p>col-6</p>
        </div>
      </div>
      <div class="col-6">
        <div class="-demo">
          <p>col-6</p>
        </div>
      </div>
      <div class="col-4">
        <div class="-demo">
          <p>col-4</p>
        </div>
      </div>
      <div class="col-4">
        <div class="-demo">
          <p>col-4</p>
        </div>
      </div>
      <div class="col-4">
        <div class="-demo">
          <p>col-4</p>
        </div>
      </div>
    </div>
  </div>
</div>

7. Hide columns at breakpoints ​

This column is hidden up to _lg breakpoint

This column is hidden up to_md breakpoint

This column is hidden up to_sm breakpoint

This column is hidden up to_xs breakpoint

Show Code
html
<div class="grid">
  <div class="col-12 lg-hidden">
    <div class="-demo"><p>This column is hidden up to _lg breakpoint</p></div>
  </div>
  <div class="col-12 md-hidden">
    <div class="-demo"><p>This column is hidden up to_md breakpoint</p></div>
  </div>
  <div class="col-12 sm-hidden">
    <div class="-demo"><p>This column is hidden up to_sm breakpoint</p></div>
  </div>
  <div class="col-12 xs-hidden">
    <div class="-demo"><p>This column is hidden up to_xs breakpoint</p></div>
  </div>
</div>

8. Horizontal Alignment ​

Example: .grid-center or .grid-4-right

.grid-center

.grid-right

Show Code
html
<div class="grid-center">
  <div class="col-4">
    <div class="-demo">
      <p>.grid-center</p>
    </div>
  </div>
</div>
<div class="grid-4-right">
  <div class="col">
    <div class="-demo">
      <p>.grid-right</p>
    </div>
  </div>
</div>

9. Vertical Alignment ​

Vertical alignment on the grid: middle ​

.grid-middle

.grid-middle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.

...

Show Code
html
<div class="grid-middle">
  <div class="col">
    <div class="-demo">
      <p>.grid-middle</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit
        placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>...</p>
    </div>
  </div>
</div>

Vertical alignment on the grid: bottom ​

.grid-bottom

.grid-bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.

...

Show Code
html
<div class="grid-bottom">
  <div class="col">
    <div class="-demo">
      <p>.grid-bottom</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit
        placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>...</p>
    </div>
  </div>
</div>

Vertical alignment on the column: grid-middle & mixed columns ​

Example: .grid-4-middle

default (middle)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam architecto aut, commodi deserunt dicta eligendi error incidunt inventore maiores mollitia officiis placeat quibusdam tempora unde veritatis vero voluptas. Ab consectetur delectus nam. Ab animi aspernatur, deserunt eos et, inventore iure laboriosam laborum minus nam nihil quae tempore tenetur ullam.

col-bottom

col-top

Show Code
html
<div class="grid-4-middle">
  <div class="col">
    <div class="-demo">
      <p>default (middle)</p>
    </div>
  </div>
  <div class="col">
    <div class="-demo">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam architecto aut, commodi deserunt dicta eligendi error incidunt inventore maiores mollitia officiis placeat quibusdam tempora unde veritatis vero voluptas. Ab consectetur delectus nam. Ab animi aspernatur, deserunt eos et, inventore iure laboriosam laborum minus nam nihil quae tempore tenetur ullam.</p>
    </div>
  </div>
  <div class="col-bottom">
    <div class="-demo">
      <p>col-bottom</p>
    </div>
  </div>
  <div class="col-top">
    <div class="-demo">
      <p>col-top</p>
    </div>
  </div>
</div>

2026 - Pharma4u