postgrid

A fully responsive flexbox grid helper.

Installation

Install the package:

$ npm install postgrid --save

And load it in the postcss plugins list. For more information on how to install a plugin see the PostCSS docs

Example

Columns should always be wrapped inside a flex-wrapper. The following example results in:

• A full width, one column grid. (All columns are 1/1).
• At breakpoint $m it will have 3 even columns (All columns are 1/3).

<div :class="$style.flexWrapper">
  <div :class="$style.col">1/3</div>
  <div :class="$style.col">1/3</div>
  <div :class="$style.col">1/3</div>
</div>

.flex-wrapper {
  wrapper: 1280px;
}
 
.col {
  col: 1 1;
 
  @media ($m) {
  	col: 1 3;
  }
}

Columns

The grid comes with 12 fluid columns:

Example:

  .col {
    col: 1 4;
  }

Vertical alignment

Compose	Renders	Description
top	align-items: flex-start;	Aligns columns to top
middle	align-items: center;	Aligns columns to middle
bottom	align-items: flex-end;	Aligns columns to bottom

These styles can only be applied to a flex-grid wrapper.

Example:

  .flex-grid {
    align: top;
  }

Horizontal alignment

Compose	Renders	Description
left	justify-content: flex-start;	Aligns columns to left
center	justify-content: center;	Aligns columns to center
right	justify-content: flex-end;	Aligns columns to right

These styles can only be applied to a flex-grid wrapper.

Example:

  .col {
    align: right;
  }

Align self

Column specific alignment.

Compose	Renders	Description
top	align-self: flex-start;	Aligns this column to top
middle	align-self: center;	Aligns this column to center
bottom	align-self: flex-end;	Aligns this column to bottom

These compose styles can only be applied to a column.

Example:

  .col {
    align-self: center;
  }

Align content

Aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Note: this property has no effect when there is only one line of flex items.

Space around

Lines evenly distributed with equal space around each line.

Example:

.flex-grid {
  space: around
}

Space between

lines evenly distributed; the first line is at the start of the container while the last one is at the end.

Example:

.flex-grid {
  space: between
}

Gutters

Using a transparent border combined with background-clip: padding-box enables you to use percentages on cols without the need to calc gutters.

Important: When using gutters be sure to compose the corresponding gutter-fix on the flex-grid wrapper:

.flex-grid {
  gutter: 20px;
}

Note: If you need a solid border around your column use an extra div inside the column.

Push

Push columns to the right based on col width.

Example:

.col {
  push: 1 4;
}