Flexbox Grid Pro

Introduction

Flexbox Grid Pro is a rich modular grid system for creating adaptive, responsive layouts. The grid is available in two versions - as a set of predefined css classes and as a set of sass mixins. That is, you can either put necessary classes in the html markup to the necessary elements or connect the necessary mixins in your sass code in the selectors, as shown below. Both options are equivalent and give similar results. Which one to use is just a matter of your preference:

HTML

<div class="wrapper container">
  <header class="page-header row">
    <div class="logo col-2"></div>
    <nav class="main-nav col"></nav>
  </header>

  <main class="page-main row">
    <section class="left-sidebar col-3"></section>
    <section class="page-content col-6"></section>
    <section class="right-sidebar col-3"></section>
  </main>

  <footer class="page-footer row">
    <div class="footer-menu col-4"></div>
    <div class="license col-8"></div>
  </footer>
</div>

Sass ( Scss syntax )

.wrapper {
  @include container();
}

.page-header,
.page-main,
.page-footer {
  @include row();
}

.logo {
  @include col(2);
}

.main-nav {
  @include col();
}

.left-sidebar,
.right-sidebar {
  @include col(3);
}

.page-content {
  @include col(6);
}

.footer-menu {
  @include col(4);
}

.license {
  @include col(8);
}

The library contains the following sections of sets of css classes and corresponding sass mixins:

Alignment
Direction of the arrangement of cells in the grid
Column offset
Arranging cells
Hiding and displaying elements

In order to create an adaptive grid, you need to add a container element container to the markup that contains row elements with the required number of columns inside. The example below shows a grid consisting of three rows row, each of which in turn contains three columns col uniform width:

col

HTML

<div class="container">
  <div class="row">
    <div class="col"></div>
  </div>
  <div class="row">
    <div class="col"></div>
  </div>
  <div class="row">
    <div class="col"></div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.row {
  @include row();
}

.col {
  @include col();
}

Columns of the specified width

By default, the grid consists of twelve columns. Just set the element to the required class or connect the desired mixin in the selector:

col-12

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-7

col-5

col-8

col-4

col-9

col-3

col-10

col-2

col-11

col-1

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col">col-12</div>
  </div>

  <div class="example row">
    <div class="example__col col-1">col-1</div>
    <div class="example__col col-11">col-11</div>
  </div>

  <div class="example row">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-10">col-10</div>
  </div>

  <div class="example row">
    <div class="example__col col-3">col-3</div>
    <div class="example__col col-9">col-9</div>
  </div>

  <div class="example row">
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-8">col-8</div>
  </div>

  <div class="example row">
    <div class="example__col col-5">col-5</div>
    <div class="example__col col-7">col-7</div>
  </div>

  <div class="example row">
    <div class="example__col col-6">col-6</div>
    <div class="example__col col-6">col-6</div>
  </div>

  <div class="example row">
    <div class="example__col col-7">col-7</div>
    <div class="example__col col-5">col-5</div>
  </div>

  <div class="example row">
    <div class="example__col col-8">col-8</div>
    <div class="example__col col-4">col-4</div>
  </div>

  <div class="example row">
    <div class="example__col col-9">col-9</div>
    <div class="example__col col-3">col-3</div>
  </div>

  <div class="example row">
    <div class="example__col col-10">col-10</div>
    <div class="example__col col-2">col-2</div>
  </div>

  <div class="example row">
    <div class="example__col col-11">col-11</div>
    <div class="example__col col-1">col-1</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &:first-child {

    .example__col {
      @include col(12);
    }
  }

  &:nth-child(2) {

    .example__col:first-child {
      @include col(1);
    }

    .example__col:nth-child(2) {
      @include col(11);
    }
  }

  &:nth-child(3) {

    .example__col:first-child {
      @include col(2);
    }

    .example__col:nth-child(2) {
      @include col(10);
    }
  }

  &:nth-child(4) {

    .example__col:first-child {
      @include col(3);
    }

    .example__col:nth-child(2) {
      @include col(9);
    }
  }

  &:nth-child(5) {

    .example__col:first-child {
      @include col(4);
    }

    .example__col:nth-child(2) {
      @include col(8);
    }
  }

  &:nth-child(6) {

    .example__col:first-child {
      @include col(5);
    }

    .example__col:nth-child(2) {
      @include col(7);
    }
  }

  &:nth-child(7) {

    .example__col:first-child {
      @include col(6);
    }

    .example__col:nth-child(2) {
      @include col(6);
    }
  }

  &:nth-child(8) {

    .example__col:first-child {
      @include col(7);
    }

    .example__col:nth-child(2) {
      @include col(5);
    }
  }

  &:nth-child(9) {

    .example__col:first-child {
      @include col(8);
    }

    .example__col:nth-child(2) {
      @include col(4);
    }
  }

  &:nth-child(10) {

    .example__col:first-child {
      @include col(9);
    }

    .example__col:nth-child(2) {
      @include col(3);
    }
  }

  &:nth-child(11) {

    .example__col:first-child {
      @include col(10);
    }

    .example__col:nth-child(2) {
      @include col(2);
    }
  }

  &:nth-child(12) {

    .example__col:first-child {
      @include col(11);
    }

    .example__col:nth-child(2) {
      @include col(1);
    }
  }
}

Alignment

For horizontal and vertical alignment of columns use the necessary classes or mixins.

Horizontal

col-2

HTML

<div class="container">
  <div class="example row justify-content-start">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
  </div>

  <div class="example row justify-content-center">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
  </div>

  <div class="example row justify-content-end">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
  </div>

  <div class="example row justify-content-space-between">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
  </div>

  <div class="examplerow justify-content-space-around">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:first-child {
      @include justify-content(flex-start);
    }

    &:nth-child(2) {
      @include justify-content(center);
    }

    &:nth-child(3) {
      @include justify-content(flex-end);
    }

    &:nth-child(4) {
      @include justify-content(space-between);
    }

    &:nth-child(5) {
      @include justify-content(space-around);
    }

    &__col {
      @include col(2);
    }
  }
}

Vertical

col-4

HTML

<div class="container">
  <div class="example row align-items-start">
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
  </div>

  <div class="example row align-items-center">
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
  </div>

  <div class="example row align-items-end">
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
  </div>

  <div class="example row align-items-stretch">
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
  </div>

  <div class="example row">
    <div class="example__col col-4 align-self-start">col-4</div>
    <div class="example__col col-4 align-self-center">col-4</div>
    <div class="example__col col-4 align-self-end">col-4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:first-child {
      @include align-items(flex-start);
    }

    &:nth-child(2) {
      @include align-items(center);
    }

    &:nth-child(3) {
      @include align-items(flex-end);
    }

    &:nth-child(4) {
      @include align-items(stretch);
    }

    &:nth-child(5) {

      .example__col:first-child {
        @include align-self(flex-start);
      }

      .example__col:nth-child(2) {
        @include align-self(center);
      }

      .example__col:nth-child(3) {
        @include align-self(flex-end);
      }
    }

    &__col {
      @include col(4);
    }
  }
}

Direction of the main axis

To specify the direction of the columns in the row, use the necessary classes or mixins:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col-3">1</div>
    <div class="example__col col-3">2</div>
    <div class="example__col col-3">3</div>
    <div class="example__col col-3">4</div>
  </div>

  <div class="example row direction-row-reverse">
    <div class="example__col col-3">1</div>
    <div class="example__col col-3">2</div>
    <div class="example__col col-3">3</div>
    <div class="example__col col-3">4</div>
  </div>

  <div class="example row direction-column">
    <div class="example__col col-3">1</div>
    <div class="example__col col-3">2</div>
    <div class="example__col col-3">3</div>
    <div class="example__col col-3">4</div>
  </div>

  <div class="example row direction-column-reverse">
    <div class="example__col col-3">1</div>
    <div class="example__col col-3">2</div>
    <div class="example__col col-3">3</div>
    <div class="example__col col-3">4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:nth-child(2) {
      @include direction(row-reverse);
    }

    &:nth-child(3) {
      @include direction(column);
    }

    &:nth-child(4) {
      @include direction(column-reverse);
    }

    &__col {
      @include col(3);
    }
  }
}

Column order

To specify the order of the columns in the row, use the necessary classes or mixins:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col-2 order-2">1</div>
    <div class="example__col col-2 order-1">2</div>
    <div class="example__col col-2 order-4">3</div>
    <div class="example__col col-2 order-3">4</div>
    <div class="example__col col-2 order-6">5</div>
    <div class="example__col col-2 order-5">6</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &__col {
      @include col(2);

      &:first-child {
        @include order(2);
      }

      &:nth-child(2) {
        @include order(1);
      }

      &:nth-child(3) {
        @include order(4);
      }

      &:nth-child(4) {
        @include order(3);
      }

      &:nth-child(5) {
        @include order(6);
      }

      &:last-child {
        @include order(5);
      }
    }
  }
}

Column offset

Use column classes or mixins to offset columns:

of-1

of-2

of-3

of-4

of-5

of-6

of-7

of-8

of-9

of-10

of-11

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col-1 offset-right-1">of-1</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-2">of-2</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-3">of-3</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-4">of-4</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-5">of-5</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-6">of-6</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-7">of-7</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-8">of-8</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-9">of-9</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-10">of-10</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 no-v-gutters offset-right-11">of-11</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &:first-child {

    .example__col {
      @include offset-right(1);
    }
  }

  &:nth-child(2) {

    .example__col {
      @include offset-right(2);
    }
  }

  &:nth-child(3) {

    .example__col {
      @include offset-right(3);
    }
  }

  &:nth-child(4) {

    .example__col {
      @include offset-right(4);
    }
  }

  &:nth-child(5) {

    .example__col {
      @include offset-right(5);
    }
  }

  &:nth-child(6) {

    .example__col {
      @include offset-right(6);
    }
  }

  &:nth-child(7) {

    .example__col {
      @include offset-right(7);
    }
  }

  &:nth-child(8) {

    .example__col {
      @include offset-right(8);
    }
  }

  &:nth-child(9) {

    .example__col {
      @include offset-right(9);
    }
  }

  &:nth-child(10) {

    .example__col {
      @include offset-right(10);
    }
  }

  &:nth-child(11) {

    .example__col {
      @include offset-right(11);
    }
  }

  &:nth-child(12) {

    .example__col {
      @include offset-right(12);
    }
  }
}

Hide and show items

Hide

To hide the elements, use the necessary classes or mixins. In the example below, the second and fourth columns will be hidden with a viewport width of 960px or less:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col">1</div>
    <div class="example__col col hide-laptop-md">2</div>
    <div class="example__col col">3</div>
    <div class="example__col col hide-laptop-md">4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();
  }

  &:nth-child(2),
  &:nth-child(4) {
    .example__col {
      @include hide(laptop-md);
    }
  }
}

Display

To display the elements, use the necessary classes or mixins. In the example below, the second and fourth columns will be hidden with a viewport width of 960px or less, but will be displayed again with a viewport width of 768px:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col">1</div>
    <div class="example__col col hide-laptop-md show-tablet-landscape">2</div>
    <div class="example__col col">3</div>
    <div class="example__col col hide-laptop-md show-tablet-landscape">4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();
  }

  &:nth-child(2),
  &:nth-child(4) {
    .example__col {
      @include hide(laptop-md);
      @include show(tablet-landscape);
    }
  }
}

Zeroing indentation of row and column elements

To nullify the indentation of row and column elements, use the classes or mixins intended for this. In the example below, the vertical indentation of the first two elements of the lines is reset:

col

HTML

<div class="container">
  <div class="example row no-v-gutters">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>

  <div class="example row no-v-gutters">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>

  <div class="example row">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();
  }

  &:first-child,
  &:nth-child(2) {
    @include no-v-gutters();
  }
}

In the following example, the vertical outer margins are reset for the columns in the second row:

col

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>

  <div class="example row no-children-v-gutters">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();
  }

  &:nth-child(2) {
    @include no-children-v-gutters();
  }
}

In the following example, the columns in the second line reset the horizontal outer margins:

col

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>

  <div class="example row no-children-h-gutters">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();
  }

  &:nth-child(2) {
    @include no-children-h-gutters();
  }
}

In the following example, the vertical margins of the first column is reset:

col

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col no-v-gutters">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();

    &:first-child {
      @include no-v-gutters();
    }
  }
}

In the following example, the first column has reset the horizontal outer margins:

col

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col no-h-gutters">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();

    &:first-child {
      @include no-h-gutters();
    }
  }
}

In the following example, both horizontal and vertical outer margins are reset for the columns:

col

HTML

<div class="container">
  <div class="example row no-children-gutters">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();
  @include no-children-gutters();

  &__col {
    @include col();
  }
}

Column classes

By default, the grid consists of twelve columns and accordingly contains twelve "column" classes:

col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12

Breakpointns

By default, the system uses eight predefined desktop-first style control points:

Breakpoint	Viewport Size
desktop	1280px
laptop	1024px
laptop-md	960px
tablet-landscape	768px
phone-landscape	640px
phone	480px
phone-md	360px
phone-sm	320px

Responsive column classes

Based on a predetermined number of columns and control point names used in the grid (by default), the system includes a set of responsive column classes:

col-desktop-1 - col-desktop-12
col-laptop-1 - col-laptop-12
col-laptop-md-1 - col-laptop-md-12
col-tablet-landscape-1 - col-tablet-landscape-12
col-phone-landscape-1 - col-phone-landscape-12
col-phone-1 - col-phone-12
col-phone-md-1 - col-phone-md-12
col-phone-sm-1 - col-phone-sm-12

Customizing the grid

Along with the finished css file, the library is available as Sass source files. Both sass and scss syntax are available. When using Sass, you can use a set of ready-made variables and mixins to customize the grid and its flexible settings. All predefined grid classes use the same variables and mixins to provide a whole set of ready-to-use classes for quickly creating adaptive layouts.

Variables

Variables and maps determine the width of the grid container and its internal horizontal indents, the number of columns and the horizontal and vertical distance between them, control points for media queries, as well as parts of the library that will be included in the generated css file. They are used to generate the specified grid classes, as well as for the mixins used in the examples above.

Mixins

The directory grid/mixins/ contains mixins that are used with mesh variables to generate css. All generated library classes use the same mixins.

Sass source files

Grid

The file grid/grid.scss contains all the variables and grid settings that you can override:

Sass ( Scss syntax )

$container-width: 1140px !default;
$container-padding: 15px !default;
$h-gutter: 30px !default;
$v-gutter: $h-gutter !default;
$columns: 12 !default;
$mobile-first: false !default;

@function query-direction() {
  @if($mobile-first) {
    @return min;
  } @else {
    @return max;
  }
}

$media-query: query-direction();

$grid-breakpoints: (
  desktop: 1280px,
  laptop: 1024px,
  laptop-md: 960px,
  tablet-landscape: 768px,
  phone-landscape: 640px,
  phone: 480px,
  phone-md: 360px,
  phone-sm: 320px
) !default;

$partials: (
  alignment,
  direction,
  hide,
  offset,
  ordering,
  show,
  gutters
) !default;

@import 'mixins/mixins';
@import 'partials/alignment';
@import 'partials/ordering';
@import 'partials/direction';
@import 'partials/hide';
@import 'partials/show';
@import 'partials/offset';
@import 'partials/gutters.scss';
@import 'base';

In order to override the default variables, give them your values before importing the main library file grid/grid.scss:

Sass ( Scss syntax )

$container-width: 1920px;
$container-padding: 10px;
$h-gutter: 15px;
$columns: 24;
$mobile-first: true;

$grid-breakpoints: (
  lg: 1280px,
  md: 960px,
  sm: 768px,
  xs: 480px
);

@import 'path/to/grid/grid.scss'

container-width - the width of the container
container-padding - inner padding of the container
h-gutter - horizontal distance between the grid columns
v-gutter - the vertical distance between the grid columns
columns - the number of grid columns
mobile-first - a Boolean flag indicating which approach will be used when generating media queries - mobile first or desktop first
media-query - the variable takes one of two values - min or max. Which value the variable will take depends on the value of the variable mobile-first. This variable is used to determine by what principle will the grid’s media queries be formed - mobile first or desktop first.
grid-breakpoints - grid breakpoints map. By default, eight control points are available. The map is used by system mixins, as well as parts of the grid/partials, which are responsible for generating responsive column and other classes. For example, based on the names of the map keys and their values in the collected final css-file of the library, classes and media queries for them will be generated, as shown below.
partials - a list of library parts responsible for generating certain sections of html classes. To reduce the size of the final css file of the library, you can set this variable to false before importing main library file. This will prevent the generation of a large number of predefined classes.

Responsive classes based on the breakpoint map

Below are the grid classes generated on the basis of the $grid-breakpoints breakpoint map and that work for a given viewport width. Class names are generated based on the map key names $grid-breakpoints , the viewport width values in media queries for these classes are generated based on the values of the corresponding keys. If you want to assign your names for classes and your values for viewport widths, just override the $grid-breakpoints variable before importing the main library file grid.scss . To see how the grid will be rebuilt at different viewport widths, just resize the browser window.

The number of columns in a row with different viewport widths: col-desktop-5 , col-laptop-2 , col-tablet-landscape-3 , col-phone-md-12 , etc. :

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">1</div>
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">2</div>
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">3</div>
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">4</div>
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">5</div>
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">6</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &__col {
      @include col(2);
      @include col(3, laptop);
      @include col(4, laptop-md);
      @include col(6, tablet-landscape);
      @include col(12, phone-landscape);
    }
  }
}

Horizontal alignment of columns in a row with different viewport widths: justify-content-desktop-start , justify-content-desktop-center , justify-content-laptop-end etc.:

HTML

<div class="container">
  <div class="example row justify-content-laptop-center justify-content-laptop-md-end justify-content-tablet-landscape-between justify-content-phone-landscape-around">
    <div class="example__col col-2">1</div>
    <div class="example__col col-2">2</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();
    @include justify-content(center, laptop);
    @include justify-content(flex-end, laptop-md);
    @include justify-content(space-between, tablet-landscape);
    @include justify-content(space-around, phone-landscape);

    &__col {
      @include col(2);
    }
  }
}

Vertical alignment of columns in a row with different viewport widths: align-items-desktop-start , align-items-desktop-center , align-items-laptop-end , align-items-tablet-landscape-stretch , align-items-phone-baseline , etc .:

HTML

<div class="container">
  <div class="example row align-items-start align-items-laptop-center align-items-laptop-md-end align-items-tablet-landscape-stretch align-items-phone-landscape-baseline">
    <div class="example__col col">1</div>
    <div class="example__col col">2</div>
    <div class="example__col col">3</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();
    @include align-items(flex-start);
    @include align-items(center, laptop);
    @include align-items(flex-end, laptop-md);
    @include align-items(stretch, tablet-landscape);
    @include align-items(baseline, phone-landscape);

    &__col {
      @include col();
    }
  }
}

Vertical alignment of a single column in a row with different viewport widths: align-self-desktop-start, align-self-desktop-center, align-self-laptop-end, align-self-tablet-landscape-stretch, align-self-phone-baseline, etc .:

HTML

<div class="container">
  <div class="example row align-items-start">
    <div class="example__col col align-self-laptop-center align-self-laptop-md-end align-self-tablet-landscape-stretch align-self-phone-landscape-baseline">1</div>
    <div class="example__col col">2</div>
    <div class="example__col col">3</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();
    @include align-items(flex-start);

    &__col {
      @include col();

      &:first-child {
        @include align-self(center, laptop);
        @include align-self(end, laptop-md);
        @include align-self(stretch, tablet-landscape);
        @include align-self(baseline, phone-landscape);
      }
    }
  }
}

The direction of the arrangement of the columns in the row at different viewport widths: direction-desktop-column, direction-desktop-row-reverse, direction-laptop-column, direction-laptop-row-reverse, etc.:

HTML

<div class="container">
  <div class="example row align-items-start align-items-laptop-md-stretch direction-laptop-row-reverse direction-laptop-md-column direction-tablet-landscape-column-reverse">
    <div class="example__col col">1</div>
    <div class="example__col col">2</div>
    <div class="example__col col">3</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();
    @include align-items(flex-start);
    @include align-items(stretch, laptop-md);
    @include direction(row-reverse, laptop);
    @include direction(column, laptop-md);
    @include direction(column-reverse, tablet-landscape);

    &__col {
      @include col();

      &:first-child {
        @include align-self(center, laptop);
        @include align-self(end, laptop-md);
        @include align-self(stretch, tablet-landscape);
        @include align-self(baseline, phone-landscape);
      }
    }
  }
}

The offset of the columns in the row for different viewport widths: offset-desktop-right-2, offset-laptop-left-4, offset-tablet-landscape-left-9 , offset-phone-left-11 and etc .:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col-2 offset-laptop-right-2 offset-laptop-md-right-4 offset-tablet-landscape-right-6 offset-phone-landscape-right-auto">1</div>
  </div>

  <div class="example row">
    <div class="example__col col-2 offset-laptop-md-right-auto">2</div>
  </div>

  <div class="example row">
    <div class="example__col col-2 offset-right-auto offset-desktop-left-auto">3</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:first-child {

      .example__col {
        @include offset(right, 2, laptop);
        @include offset(right, 4, laptop-md);
        @include offset(right, 6, tablet-landscape);
        @include offset(right, auto, phone-landscape);
      }
    }

    &:nth-child(2) {

      .example__col {
        @include offset(right, auto, laptop-md);
      }
    }

    &:nth-child(3) {

      .example__col {
        @include offset(right, auto);
        @include offset(left, auto, desktop);
      }
    }

    &__col {
      @include col(2);
    }
  }
}

Changing the order of columns in a row: order-desktop-1 , order-laptop-3 , order-laptop-md-5, order-phone-first, order-phone-sm-last etc .:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col order-laptop-2">1</div>
    <div class="example__col col order-laptop-1">2</div>
    <div class="example__col col order-laptop-4">3</div>
    <div class="example__col col order-laptop-3">4</div>
  </div>

  <div class="example row">
    <div class="example__col col order-laptop-last">1</div>
    <div class="example__col col">2</div>
    <div class="example__col col">3</div>
    <div class="example__col col order-laptop-first">4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:first-child {

      .example__col:first-child {
        @include order(2, laptop);
      }

      .example__col:nth-child(2) {
        @include order(1, laptop);
      }

      .example__col:nth-child(3) {
        @include order(4, laptop);
      }

      .example__col:last-child {
        @include order(3, laptop);
      }
    }

    &:last-child {

      .example__col:first-child {
        @include order(last, laptop);
      }

      .example__col:last-child {
        @include order(first, laptop);
      }
    }

    &__col {
      @include col();
    }
  }
}

Hiding and displaying grid elements at different viewport widths: hide-desktop , hide-laptop , hide-tablet-landscape , hide-phone-sm , show-desktop, show-laptop, show-tablet-landscape etc.:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col hide-laptop">1</div>
    <div class="example__col col">2</div>
  </div>

  <div class="example row">
    <div class="example__col col">3</div>
    <div class="example__col col hide show-laptop">4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:first-child {

      .example__col:first-child {
        @include hide(laptop);
      }
    }

    &:last-child {

      .example__col:last-child {
        @include show(laptop);
      }
    }

    &__col {
      @include col();
    }
  }
}

Like other default variables, you can override the value of the $grid-breakpoints variable by setting more traditional viewport names and sizes for control points:
Sass ( Scss syntax )
```
$grid-breakpoints: (
  lg: 1280px,
  md: 960px,
  sm: 768px,
  xs: 480px
);
```

This will generate the following classes: col-lg-12, col-md-4, justify-content-sm-center, offset-xs-2, order-lg-9, direction-sm-column, hide-sm, show-xs etc.

Parts

The partials directory contains a list of library parts responsible for generating class categories and media queries. In order to reduce the generated css file of the library, you can redefine the list, leaving only those elements whose names correspond to those parts of the library whose classes you will use. Below we will also say which parts are responsible for what. Or, if instead of arranging classes on the elements in the markup for building the grid, you prefer to use Sass and predefined mixins set the variable partials to the value false ( not null ) or any other not null value.

Sass ( Scss syntax )

$partials: false;

This will prevent the generation of a large number of ready-made classes, which will significantly reduce the size of the final css file of the library.

Alignment

The file grid/partials/alignment.scss contains code that generates classes that are responsible for aligning columns within a row.

Direction of the arrangement of columns in a row

The file grid/partials/direction.scss contains code that generates classes that are responsible for the direction of the main axis along which the columns within the row are aligned.

Column ordering

The file grid/partials/ordering.scss contains code that generates classes that are responsible for the order of the columns inside the row.

Column offset

The file grid/partials/offset.scss contains code that generates classes that are responsible for offsetting columns within a row.

Hide elements

The file grid/partials/hide.scss contains code that generates classes that are responsible for hiding elements.

Display elements

The file grid/partials/visible.scss contains code that generates classes that are responsible for displaying elements.

Zeroing the outer indentation of row and column elements

The file grid/partials/gutters.scss contains code that generates classes that are responsible for nulling the outer indents of row and column elements.

Basic grid initialization

The file grid/base.scss contains code that generates the base mesh classes.

Compilation of source sass files

When using the flexbox-grid-pro library as sass files, it is strongly recommended that you use the minifiers group-css-media-queries and csso . This will significantly reduce the amount of library css-file collected.

Reference table for classes and mixins

Alignment

Class

Corresponding Mixin

Description

justify-content-start,

justify-content-center,

justify-content-end,

justify-content-space-between,

justify-content-space-around

justify-content( $align, $breakpoint )

Aligns the columns in a row according to the $align parameter, which must take one of the following values: flex-start , flex-end, center , space-between , space-around . Applies to row elements ( row ) of the grid. If the argument $breakpoint is passed, alignment will work in the media query according to the value of this argument. The argument value must be one of the key names of the global object $grid-breakpoints.

Parameter	Type	Available Values	Default Value	Description
align	String	flex-start, center, flex-end, space-between, space-around,	flex-start	Specifies the direction in which the columns in the row are laid out.
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, the alignment will work in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints .

Align the columns in the row according to the properties of the flex container: flex-start, center, flex-end, space-between, space-around. Applies to a line item.

align-items-start,

align-items-center,

align-items-end,

align-items-stretch,

align-items-baseline

align-items( $align, $breakpoint )

Aligns the columns in a row according to the $align parameter, which must take one of the following values: flex-start , flex-end , center , stretch , baseline . Applies to row elements ( row ) of the grid. If the argument $breakpoint is passed, alignment will work in the media query according to the value of this argument. The argument value must be one of the key names of the global object $grid-breakpoints .

Parameter	Type	Available Values	Default Value	Description
align	String	flex-start, center, flex-end, stretch, baseline	flex-start	Specifies how columns are aligned.
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, the alignment will work in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints.

Align the columns in a row according to the properties of the flex container: flex-start, center, flex-end, stretch, baseline. Applies to a line item.

align-self-start,

align-self-center,

align-self-end,

align-self-stretch,

align-self-baseline

align-self( $align, $breakpoint )

Aligns a single column in a row according to the $align parameter, which must take one of the following values: flex-start , flex-end , center , stretch , baseline . Applies to column elements ( col ) of the grid. If the argument $breakpoint is passed, alignment will work in the media query according to the value of this argument. The argument value must be one of the key names of the global object $grid-breakpoints .

Parameter	Type	Available Values	Default Value	Description
align	String	flex-start, center, flex-end, stretch, baseline,	flex-start	Specifies how to align a single column in a row.
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, the alignment will work in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints .

Align a single column in a row according to the properties of the flex container: flex-start, center, flex-end, stretch, baseline. Apply to a column element.

The direction of the main axis

Class

Corresponding Mixin

Description

direction-row,

direction-row-reverse,

direction-column,

direction-column-reverse

direction ($direction, $breakpoint)

Specifies the direction of the main axis along which the columns in the row are aligned. One of the following values should be passed as an argument to the first parameter $direction: row, row-reverse, column, column-reverse. If the second argument is passed the value corresponding to one of the key names of the global object $grid-breakpoints, the rule will be applied in the media query.

Parameter	Type	Available Values	Default Value	Description
direction	String	row, row-reverse, column, column-reverse	row	Specifies the direction of the main axis along which the columns in the row line up.
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone -sm	null	Optional parameter. If a value is passed for it, setting the direction of the main axis will work in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints.

Set the direction of the main axis along which the columns in the row are aligned, according to the properties of the flex container: row, row-reverse, column, column-reverse. Applied to the row element row .

Column offset

Class

Corresponding Mixin

Description

offset-left-1 - offset-left-12,

offset-right-1 - offset-right-12,

offset-left-auto,

offset-right-auto

offset ( $direction, $offset, $breakpoint )

Shifts a column in a row by $offset - an integer number of columns, to the right - $direction : right or left - $direction : left. If auto is used as the second argument, the column is shifted to free space in one direction or another. If the argument value is $breakpoint corresponds to one of the key names of the global object $grid-breakpoints , the rules are applied in the corresponding media query.

Parameter	Type	Available Values	Default Value	Description
direction	String	left, right	right	Depends on this parameter in which direction the columns will shift - to the right or left.
offset	Number \| String	integer number of columns, auto	auto	The number of columns by which the column will be shifted. If the value auto is passed, the column will shift left/right (depends on the second parameter direction ) to all available free space.
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, the column call will trigger in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints .

Shift the columns in the row by a certain number of columns to the right or left.

Column layout

Class

Corresponding Mixin

Description

order-0 - order-12,

order-first,

order-last,

order ($order,$ breakpoint)

Sorts the columns in a row according to the parameter $order - an integer that determines the order of columns - the smaller the number, the closer the column will be to the beginning of the line. If when the mixin is called, it will be given the second argument $breakpoint , and its value will correspond to one of the key names of the global object $grid -breakpoints , then the sequencing rule will only work in the corresponding media request. Applies to row element row

Parameter	Type	Available Values	Default Value	Description
order	Number \| String	0 is the total number of columns, first, last	0	An integer or line that defines the visual position of the column in the grid line. The smaller the number, the closer the column will be to the beginning of the line.
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, the column call will trigger in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints .

Set the order of the visual arrangement of the columns in the row. Applies to row element row

Reset margins

Class

Corresponding Mixin

Description

no-gutters

no-gutters ( $breakpoint )

Zeros the outer margins of the element. Applies to any grid element.

Parameter	Type	Available Values	Default Value	Description
$breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, resetting the indentation for the element will trigger in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints .

Zero out all indentation of the element. Apply to both the line element and the grid element.

no-h-gutters

no-h-gutters ( $breakpoint )

Zeroes out the horizontal indents of the element. Applies to both the row element and the column element.

Parameter	Type	Available Values	Default Value	Description
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, resetting the indentation for the element will trigger in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints .

Zero out the horizontal horizontal padding of the element. Applies to both the row element and the column element.

no-v-gutters

no-v-gutters ( $breakpoint )

Zeros the outer vertical indents of the element. Applies to both the row element and the column element.

Parameter	Type	Available Values	Default Value	Description
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, resetting the indentation for the element will trigger in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints .

Zero the outer vertical padding of the element. Applies to both the row element and the column element.

no-children-gutters

no-children-gutters( $breakpoint )

Zero out the indentation of the column elements in the row. Applies to the row element.

Parameter	Type	Available Values	Default Value	Description
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, resetting the indentation for the element will trigger in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints .

Zero the outer margins of the column elements in the row. Apply to the row element.

no-children-h-gutters

no-children-h-gutters( $breakpoint )

Zeroes the outer horizontal indentation of the column elements in the row. Applies to the row element.

Parameter	Type	Available Values	Default Value	Description
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, resetting the indentation for the element will trigger in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints .

Zero the outer horizontal indentation of the column elements in the row. Applies to the row element.

no-children-v-gutters

no-children-v-gutters( $breakpoint )

Zero out the outer vertical indentation of the column elements in the row. Applies to the row element.

Parameter	Type	Available Values	Default Value	Description
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, resetting the indentation for the element will trigger in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints .

Zero the outer vertical indentation of the column elements in the row. Applies to the row element.

Hide items

Class

Corresponding Mixin

Description

hide

hide ($ breakpoint)

Hides the element by setting its display property to none. If the value of the argument $breakpoint matches one of the key names of the global object $grid-breakpoints , the rule will be applied in the corresponding media request. Applies to any grid item.

Parameter	Type	Available Values	Default Value	Description
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Optional parameter. If a value is passed for it, hiding for the element will trigger in the media query according to this value. The argument value must be one of the key names of the global object $grid-breakpoints .

Hides the element by setting its display property to none. Applies to any grid item.

Show hidden items

Class

Corresponding Mixin

Description

show

show ($display, $breakpoint)

Displays hidden elements by setting its display property to any value available for this property other than none. Applies to any element of the grid.

Parameter	Type	Available Values	Default Value	Description
display	String	Any value available for the css property display , except for none .	initial	Sets the display property of the element to the specified value.

Displays hidden elements by setting its display property to any value available for this property other than none. Applies to any grid element.