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;
}