diff --git a/components/form/nz-form-control.component.ts b/components/form/nz-form-control.component.ts
index 4bb15edf591..fb7ed77e5b3 100644
--- a/components/form/nz-form-control.component.ts
+++ b/components/form/nz-form-control.component.ts
@@ -1,5 +1,5 @@
 import {
-  AfterContentInit,
+  AfterContentInit, AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -18,7 +18,7 @@ import { startWith } from 'rxjs/operators';
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { NgClassType } from '../core/types/ng-class';
 import { toBoolean } from '../core/util/convert';
-import { NzColComponent } from '../grid/nz-col.component';
+import { NzColDirective } from '../grid/nz-col.directive';
 import { NzRowDirective } from '../grid/nz-row.directive';
 import { NzFormItemComponent } from './nz-form-item.component';
 
@@ -37,7 +37,7 @@ import { NzFormItemComponent } from './nz-form-item.component';
     `
   ]
 })
-export class NzFormControlComponent extends NzColComponent implements OnDestroy, OnInit, AfterContentInit {
+export class NzFormControlComponent extends NzColDirective implements OnDestroy, OnInit, AfterContentInit, AfterViewInit, OnDestroy {
   private _hasFeedback = false;
   validateChanges: Subscription;
   validateString: string;
@@ -120,7 +120,7 @@ export class NzFormControlComponent extends NzColComponent implements OnDestroy,
   }
 
   constructor(nzUpdateHostClassService: NzUpdateHostClassService, elementRef: ElementRef, @Optional() @Host() nzFormItemComponent: NzFormItemComponent, @Optional() @Host() nzRowDirective: NzRowDirective, private cdr: ChangeDetectorRef, renderer: Renderer2) {
-    super(nzUpdateHostClassService, elementRef, nzFormItemComponent, nzRowDirective);
+    super(nzUpdateHostClassService, elementRef, nzFormItemComponent || nzRowDirective, renderer);
     renderer.addClass(elementRef.nativeElement, 'ant-form-item-control-wrapper');
   }
 
@@ -131,6 +131,7 @@ export class NzFormControlComponent extends NzColComponent implements OnDestroy,
 
   ngOnDestroy(): void {
     this.removeSubscribe();
+    super.ngOnDestroy();
   }
 
   ngAfterContentInit(): void {
@@ -138,4 +139,8 @@ export class NzFormControlComponent extends NzColComponent implements OnDestroy,
       this.nzValidateStatus = this.defaultValidateControl;
     }
   }
+
+  ngAfterViewInit(): void {
+    super.ngAfterViewInit();
+  }
 }
diff --git a/components/form/nz-form-item.component.ts b/components/form/nz-form-item.component.ts
index d4e8e588325..00280298f6b 100644
--- a/components/form/nz-form-item.component.ts
+++ b/components/form/nz-form-item.component.ts
@@ -17,7 +17,7 @@ import {
 import { takeUntil } from 'rxjs/operators';
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { toBoolean } from '../core/util/convert';
-import { NzRowComponent } from '../grid/nz-row.component';
+import { NzRowDirective } from '../grid/nz-row.directive';
 import { NzFormExplainComponent } from './nz-form-explain.component';
 
 /** should add nz-row directive to host, track https://github.com/angular/angular/issues/8785 **/
@@ -39,7 +39,7 @@ import { NzFormExplainComponent } from './nz-form-explain.component';
     `
   ]
 })
-export class NzFormItemComponent extends NzRowComponent implements AfterContentInit, OnDestroy {
+export class NzFormItemComponent extends NzRowDirective implements AfterContentInit, OnDestroy {
   private _flex = false;
   @ContentChildren(NzFormExplainComponent, { descendants: true }) listOfNzFormExplainComponent: QueryList<NzFormExplainComponent>;
 
diff --git a/components/form/nz-form-label.component.ts b/components/form/nz-form-label.component.ts
index 8f75ce0c631..a8127d04cf3 100644
--- a/components/form/nz-form-label.component.ts
+++ b/components/form/nz-form-label.component.ts
@@ -1,15 +1,16 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
   Host,
-  Input,
+  Input, OnDestroy,
   Optional, Renderer2,
   ViewEncapsulation
 } from '@angular/core';
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { InputBoolean } from '../core/util/convert';
-import { NzColComponent } from '../grid/nz-col.component';
+import { NzColDirective } from '../grid/nz-col.directive';
 import { NzRowDirective } from '../grid/nz-row.directive';
 import { NzFormItemComponent } from './nz-form-item.component';
 
@@ -21,12 +22,20 @@ import { NzFormItemComponent } from './nz-form-item.component';
   changeDetection    : ChangeDetectionStrategy.OnPush,
   templateUrl        : './nz-form-label.component.html'
 })
-export class NzFormLabelComponent extends NzColComponent {
+export class NzFormLabelComponent extends NzColDirective implements OnDestroy, AfterViewInit {
   @Input() nzFor: string;
   @Input() @InputBoolean() nzRequired = false;
 
   constructor(nzUpdateHostClassService: NzUpdateHostClassService, elementRef: ElementRef, @Optional() @Host() nzFormItemComponent: NzFormItemComponent, @Optional() @Host() nzRowDirective: NzRowDirective, renderer: Renderer2) {
-    super(nzUpdateHostClassService, elementRef, nzFormItemComponent, nzRowDirective);
+    super(nzUpdateHostClassService, elementRef, nzFormItemComponent || nzRowDirective, renderer);
     renderer.addClass(elementRef.nativeElement, 'ant-form-item-label');
   }
+
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+  }
+
+  ngAfterViewInit(): void {
+    super.ngAfterViewInit();
+  }
 }
diff --git a/components/grid/nz-col.component.html b/components/grid/nz-col.component.html
deleted file mode 100644
index 95a0b70bdc7..00000000000
--- a/components/grid/nz-col.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<ng-content></ng-content>
\ No newline at end of file
diff --git a/components/grid/nz-col.component.ts b/components/grid/nz-col.component.ts
deleted file mode 100644
index ef23b40549e..00000000000
--- a/components/grid/nz-col.component.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Host,
-  HostBinding,
-  Input,
-  OnChanges,
-  OnInit,
-  Optional,
-  SimpleChange,
-  ViewEncapsulation
-} from '@angular/core';
-
-import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
-import { isNotNil } from '../core/util/check';
-
-import { NzRowComponent } from './nz-row.component';
-import { NzRowDirective } from './nz-row.directive';
-
-export interface EmbeddedProperty {
-  span: number;
-  pull: number;
-  push: number;
-  offset: number;
-  order: number;
-}
-
-@Component({
-  selector           : 'nz-col',
-  providers          : [ NzUpdateHostClassService ],
-  encapsulation      : ViewEncapsulation.None,
-  changeDetection    : ChangeDetectionStrategy.OnPush,
-  preserveWhitespaces: false,
-  templateUrl        : './nz-col.component.html'
-})
-export class NzColComponent implements OnInit, OnChanges {
-  private el: HTMLElement = this.elementRef.nativeElement;
-  private prefixCls = 'ant-col';
-
-  @HostBinding('style.padding-left.px')
-  get paddingLeft(): number {
-    return this.nzRow && this.nzRow.actualGutter / 2;
-  }
-
-  @HostBinding('style.padding-right.px')
-  get paddingRight(): number {
-    return this.nzRow && this.nzRow.actualGutter / 2;
-  }
-
-  @Input() nzSpan: number;
-  @Input() nzOrder: number;
-  @Input() nzOffset: number;
-  @Input() nzPush: number;
-  @Input() nzPull: number;
-  @Input() nzXs: number | EmbeddedProperty;
-  @Input() nzSm: number | EmbeddedProperty;
-  @Input() nzMd: number | EmbeddedProperty;
-  @Input() nzLg: number | EmbeddedProperty;
-  @Input() nzXl: number | EmbeddedProperty;
-  @Input() nzXXl: number | EmbeddedProperty;
-
-  /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289*/
-  setClassMap(): void {
-    const classMap = {
-      [ `${this.prefixCls}-${this.nzSpan}` ]         : isNotNil(this.nzSpan),
-      [ `${this.prefixCls}-order-${this.nzOrder}` ]  : isNotNil(this.nzOrder),
-      [ `${this.prefixCls}-offset-${this.nzOffset}` ]: isNotNil(this.nzOffset),
-      [ `${this.prefixCls}-pull-${this.nzPull}` ]    : isNotNil(this.nzPull),
-      [ `${this.prefixCls}-push-${this.nzPush}` ]    : isNotNil(this.nzPush),
-      ...this.generateClass()
-    };
-    this.nzUpdateHostClassService.updateHostClass(this.el, classMap);
-  }
-
-  generateClass(): object {
-    const listOfSizeInputName = [ 'nzXs', 'nzSm', 'nzMd', 'nzLg', 'nzXl', 'nzXXl' ];
-    const listClassMap = {};
-    listOfSizeInputName.forEach(name => {
-      const sizeName = name.replace('nz', '').toLowerCase();
-      if (isNotNil(this[ name ])) {
-        if ((typeof (this[ name ]) === 'number') || (typeof (this[ name ]) === 'string')) {
-          listClassMap[ `${this.prefixCls}-${sizeName}-${this[ name ]}` ] = true;
-        } else {
-          listClassMap[ `${this.prefixCls}-${sizeName}-${this[ name ].span}` ] = this[ name ] && isNotNil(this[ name ].span);
-          listClassMap[ `${this.prefixCls}-${sizeName}-pull-${this[ name ].pull}` ] = this[ name ] && isNotNil(this[ name ].pull);
-          listClassMap[ `${this.prefixCls}-${sizeName}-push-${this[ name ].push}` ] = this[ name ] && isNotNil(this[ name ].push);
-          listClassMap[ `${this.prefixCls}-${sizeName}-offset-${this[ name ].offset}` ] = this[ name ] && isNotNil(this[ name ].offset);
-          listClassMap[ `${this.prefixCls}-${sizeName}-order-${this[ name ].order}` ] = this[ name ] && isNotNil(this[ name ].order);
-        }
-      }
-
-    });
-    return listClassMap;
-  }
-
-  get nzRow(): NzRowComponent {
-    return this.nzRowComponent || this.nzRowDirective;
-  }
-
-  ngOnChanges(changes: { [ propertyName: string ]: SimpleChange }): void {
-    this.setClassMap();
-  }
-
-  constructor(private nzUpdateHostClassService: NzUpdateHostClassService, private elementRef: ElementRef, @Optional() @Host() public nzRowComponent: NzRowComponent, @Optional() @Host() public nzRowDirective: NzRowDirective) {
-  }
-
-  ngOnInit(): void {
-    this.setClassMap();
-  }
-}
diff --git a/components/grid/nz-col.directive.ts b/components/grid/nz-col.directive.ts
index 7822c83c7d0..6bacc0d005b 100644
--- a/components/grid/nz-col.directive.ts
+++ b/components/grid/nz-col.directive.ts
@@ -1,22 +1,114 @@
 import {
+  AfterViewInit,
   Directive,
   ElementRef,
   Host,
-  Optional
+  Input,
+  OnChanges, OnDestroy,
+  OnInit,
+  Optional, Renderer2,
+  SimpleChange
 } from '@angular/core';
+import { Subject } from 'rxjs';
+import { startWith, takeUntil } from 'rxjs/operators';
 
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
+import { isNotNil } from '../core/util/check';
 
-import { NzColComponent } from './nz-col.component';
-import { NzRowComponent } from './nz-row.component';
 import { NzRowDirective } from './nz-row.directive';
 
+export interface EmbeddedProperty {
+  span: number;
+  pull: number;
+  push: number;
+  offset: number;
+  order: number;
+}
+
 @Directive({
-  selector : '[nz-col]',
+  selector : '[nz-col],nz-col',
   providers: [ NzUpdateHostClassService ]
 })
-export class NzColDirective extends NzColComponent {
-  constructor(nzUpdateHostClassService: NzUpdateHostClassService, elementRef: ElementRef, @Optional() @Host() nzRowComponent: NzRowComponent, @Optional() @Host() nzRowDirective: NzRowDirective) {
-    super(nzUpdateHostClassService, elementRef, nzRowComponent, nzRowDirective);
+export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+  private el: HTMLElement = this.elementRef.nativeElement;
+  private prefixCls = 'ant-col';
+  protected destroy$ = new Subject();
+
+  @Input() nzSpan: number;
+  @Input() nzOrder: number;
+  @Input() nzOffset: number;
+  @Input() nzPush: number;
+  @Input() nzPull: number;
+  @Input() nzXs: number | EmbeddedProperty;
+  @Input() nzSm: number | EmbeddedProperty;
+  @Input() nzMd: number | EmbeddedProperty;
+  @Input() nzLg: number | EmbeddedProperty;
+  @Input() nzXl: number | EmbeddedProperty;
+  @Input() nzXXl: number | EmbeddedProperty;
+
+  /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289*/
+  setClassMap(): void {
+    const classMap = {
+      [ `${this.prefixCls}-${this.nzSpan}` ]         : isNotNil(this.nzSpan),
+      [ `${this.prefixCls}-order-${this.nzOrder}` ]  : isNotNil(this.nzOrder),
+      [ `${this.prefixCls}-offset-${this.nzOffset}` ]: isNotNil(this.nzOffset),
+      [ `${this.prefixCls}-pull-${this.nzPull}` ]    : isNotNil(this.nzPull),
+      [ `${this.prefixCls}-push-${this.nzPush}` ]    : isNotNil(this.nzPush),
+      ...this.generateClass()
+    };
+    this.nzUpdateHostClassService.updateHostClass(this.el, classMap);
+  }
+
+  generateClass(): object {
+    const listOfSizeInputName = [ 'nzXs', 'nzSm', 'nzMd', 'nzLg', 'nzXl', 'nzXXl' ];
+    const listClassMap = {};
+    listOfSizeInputName.forEach(name => {
+      const sizeName = name.replace('nz', '').toLowerCase();
+      if (isNotNil(this[ name ])) {
+        if ((typeof (this[ name ]) === 'number') || (typeof (this[ name ]) === 'string')) {
+          listClassMap[ `${this.prefixCls}-${sizeName}-${this[ name ]}` ] = true;
+        } else {
+          listClassMap[ `${this.prefixCls}-${sizeName}-${this[ name ].span}` ] = this[ name ] && isNotNil(this[ name ].span);
+          listClassMap[ `${this.prefixCls}-${sizeName}-pull-${this[ name ].pull}` ] = this[ name ] && isNotNil(this[ name ].pull);
+          listClassMap[ `${this.prefixCls}-${sizeName}-push-${this[ name ].push}` ] = this[ name ] && isNotNil(this[ name ].push);
+          listClassMap[ `${this.prefixCls}-${sizeName}-offset-${this[ name ].offset}` ] = this[ name ] && isNotNil(this[ name ].offset);
+          listClassMap[ `${this.prefixCls}-${sizeName}-order-${this[ name ].order}` ] = this[ name ] && isNotNil(this[ name ].order);
+        }
+      }
+
+    });
+    return listClassMap;
+  }
+
+  constructor(private nzUpdateHostClassService: NzUpdateHostClassService,
+              private elementRef: ElementRef,
+              @Optional() @Host() public nzRowDirective: NzRowDirective,
+              public renderer: Renderer2
+  ) {
+  }
+
+  ngOnChanges(changes: { [ propertyName: string ]: SimpleChange }): void {
+    this.setClassMap();
+  }
+
+  ngAfterViewInit(): void {
+    if (this.nzRowDirective) {
+      this.nzRowDirective.actualGutter$.pipe(
+        startWith(this.nzRowDirective.actualGutter),
+        takeUntil(this.destroy$)
+      ).subscribe((actualGutter) => {
+        this.renderer.setStyle(this.el, 'padding-left', `${actualGutter / 2}px`);
+        this.renderer.setStyle(this.el, 'padding-right', `${actualGutter / 2}px`);
+      });
+    }
+  }
+
+  ngOnInit(): void {
+    this.setClassMap();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }
diff --git a/components/grid/nz-grid.module.ts b/components/grid/nz-grid.module.ts
index 817297bc636..fee889e97e4 100644
--- a/components/grid/nz-grid.module.ts
+++ b/components/grid/nz-grid.module.ts
@@ -3,14 +3,12 @@ import { PlatformModule } from '@angular/cdk/platform';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzColComponent } from './nz-col.component';
 import { NzColDirective } from './nz-col.directive';
-import { NzRowComponent } from './nz-row.component';
 import { NzRowDirective } from './nz-row.directive';
 
 @NgModule({
-  declarations: [ NzRowComponent, NzColDirective, NzColComponent, NzRowDirective ],
-  exports     : [ NzRowComponent, NzColDirective, NzColComponent, NzRowDirective ],
+  declarations: [ NzColDirective, NzRowDirective ],
+  exports     : [ NzColDirective, NzRowDirective ],
   imports     : [ CommonModule, LayoutModule, PlatformModule ]
 })
 export class NzGridModule {
diff --git a/components/grid/nz-row.component.html b/components/grid/nz-row.component.html
deleted file mode 100644
index 95a0b70bdc7..00000000000
--- a/components/grid/nz-row.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<ng-content></ng-content>
\ No newline at end of file
diff --git a/components/grid/nz-row.component.ts b/components/grid/nz-row.component.ts
deleted file mode 100644
index 9971195b96c..00000000000
--- a/components/grid/nz-row.component.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  NgZone,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Renderer2,
-  SimpleChanges,
-  ViewEncapsulation
-} from '@angular/core';
-
-import { MediaMatcher } from '@angular/cdk/layout';
-import { Platform } from '@angular/cdk/platform';
-import { fromEvent, Subject } from 'rxjs';
-import { auditTime, takeUntil } from 'rxjs/operators';
-import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
-
-export type NzJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
-export type NzAlign = 'top' | 'middle' | 'bottom';
-export type NzType = 'flex' | null;
-
-export enum Breakpoint {
-  'xxl',
-  'xl',
-  'lg',
-  'md',
-  'sm',
-  'xs'
-}
-
-export type BreakpointMap = { [index in keyof typeof Breakpoint]: string };
-
-const responsiveMap: BreakpointMap = {
-  xs : '(max-width: 575px)',
-  sm : '(min-width: 576px)',
-  md : '(min-width: 768px)',
-  lg : '(min-width: 992px)',
-  xl : '(min-width: 1200px)',
-  xxl: '(min-width: 1600px)'
-};
-
-@Component({
-  selector           : 'nz-row',
-  preserveWhitespaces: false,
-  encapsulation      : ViewEncapsulation.None,
-  changeDetection    : ChangeDetectionStrategy.OnPush,
-  providers          : [ NzUpdateHostClassService ],
-  templateUrl        : './nz-row.component.html'
-})
-export class NzRowComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
-  @Input() nzType: NzType;
-  @Input() nzAlign: NzAlign = 'top';
-  @Input() nzJustify: NzJustify = 'start';
-  @Input() nzGutter: number | object;
-  private el: HTMLElement = this.elementRef.nativeElement;
-  private prefixCls = 'ant-row';
-  private breakPoint: Breakpoint;
-  actualGutter: number;
-  destroy$ = new Subject();
-
-  calculateGutter(): number {
-    if (typeof this.nzGutter !== 'object') {
-      return this.nzGutter;
-    } else if (this.breakPoint && this.nzGutter[ this.breakPoint ]) {
-      return this.nzGutter[ this.breakPoint ];
-    } else {
-      return;
-    }
-  }
-
-  updateGutter(): void {
-    this.actualGutter = this.calculateGutter();
-    this.renderer.setStyle(this.el, 'margin-left', `-${this.actualGutter / 2}px`);
-    this.renderer.setStyle(this.el, 'margin-right', `-${this.actualGutter / 2}px`);
-  }
-
-  watchMedia(): void {
-    // @ts-ignore
-    Object.keys(responsiveMap).map((screen: Breakpoint) => {
-      const matchBelow = this.mediaMatcher.matchMedia(responsiveMap[ screen ]).matches;
-      if (matchBelow) {
-        this.breakPoint = screen;
-      }
-    });
-    this.updateGutter();
-  }
-
-  /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289*/
-  setClassMap(): void {
-    const classMap = {
-      [ `${this.prefixCls}` ]                                 : !this.nzType,
-      [ `${this.prefixCls}-${this.nzType}` ]                  : this.nzType,
-      [ `${this.prefixCls}-${this.nzType}-${this.nzAlign}` ]  : this.nzType && this.nzAlign,
-      [ `${this.prefixCls}-${this.nzType}-${this.nzJustify}` ]: this.nzType && this.nzJustify
-    };
-    this.nzUpdateHostClassService.updateHostClass(this.el, classMap);
-  }
-
-  constructor(public elementRef: ElementRef, public renderer: Renderer2, public nzUpdateHostClassService: NzUpdateHostClassService, public mediaMatcher: MediaMatcher, public ngZone: NgZone, public platform: Platform) {
-  }
-
-  ngOnInit(): void {
-    this.setClassMap();
-    this.watchMedia();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.nzType || changes.nzAlign || changes.nzJustify) {
-      this.setClassMap();
-    }
-    if (changes.nzGutter) {
-      this.updateGutter();
-    }
-  }
-
-  ngAfterViewInit(): void {
-    if (this.platform.isBrowser) {
-      this.ngZone.runOutsideAngular(() => {
-        fromEvent(window, 'resize')
-        .pipe(auditTime(16), takeUntil(this.destroy$))
-        .subscribe(() => this.watchMedia());
-      });
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}
diff --git a/components/grid/nz-row.directive.ts b/components/grid/nz-row.directive.ts
index 6de8a456342..fb34b53eafd 100644
--- a/components/grid/nz-row.directive.ts
+++ b/components/grid/nz-row.directive.ts
@@ -1,22 +1,133 @@
 import {
+  AfterViewInit,
   Directive,
   ElementRef,
+  Input,
   NgZone,
-  Renderer2
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+  SimpleChanges
 } from '@angular/core';
 
 import { MediaMatcher } from '@angular/cdk/layout';
 import { Platform } from '@angular/cdk/platform';
+import { fromEvent, Subject } from 'rxjs';
+import { auditTime, takeUntil } from 'rxjs/operators';
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 
-import { NzRowComponent } from './nz-row.component';
+export type NzJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+export type NzAlign = 'top' | 'middle' | 'bottom';
+export type NzType = 'flex' | null;
+
+export enum Breakpoint {
+  'xxl',
+  'xl',
+  'lg',
+  'md',
+  'sm',
+  'xs'
+}
+
+export type BreakpointMap = { [index in keyof typeof Breakpoint]: string };
+
+const responsiveMap: BreakpointMap = {
+  xs : '(max-width: 575px)',
+  sm : '(min-width: 576px)',
+  md : '(min-width: 768px)',
+  lg : '(min-width: 992px)',
+  xl : '(min-width: 1200px)',
+  xxl: '(min-width: 1600px)'
+};
 
 @Directive({
-  selector : '[nz-row]',
+  selector : '[nz-row],nz-row',
   providers: [ NzUpdateHostClassService ]
 })
-export class NzRowDirective extends NzRowComponent {
-  constructor(elementRef: ElementRef, renderer: Renderer2, nzUpdateHostClassService: NzUpdateHostClassService, mediaMatcher: MediaMatcher, ngZone: NgZone, platform: Platform) {
-    super(elementRef, renderer, nzUpdateHostClassService, mediaMatcher, ngZone, platform);
+export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+  @Input() nzType: NzType;
+  @Input() nzAlign: NzAlign = 'top';
+  @Input() nzJustify: NzJustify = 'start';
+  @Input() nzGutter: number | object;
+  private el: HTMLElement = this.elementRef.nativeElement;
+  private prefixCls = 'ant-row';
+  private breakPoint: Breakpoint;
+  actualGutter: number;
+  actualGutter$ = new Subject<number>();
+  destroy$ = new Subject();
+
+  calculateGutter(): number {
+    if (typeof this.nzGutter !== 'object') {
+      return this.nzGutter;
+    } else if (this.breakPoint && this.nzGutter[ this.breakPoint ]) {
+      return this.nzGutter[ this.breakPoint ];
+    } else {
+      return;
+    }
+  }
+
+  updateGutter(): void {
+    const actualGutter = this.calculateGutter();
+    if (this.actualGutter !== actualGutter) {
+      this.actualGutter = actualGutter;
+      this.actualGutter$.next(this.actualGutter);
+      this.renderer.setStyle(this.el, 'margin-left', `-${this.actualGutter / 2}px`);
+      this.renderer.setStyle(this.el, 'margin-right', `-${this.actualGutter / 2}px`);
+    }
+  }
+
+  watchMedia(): void {
+    // @ts-ignore
+    Object.keys(responsiveMap).map((screen: Breakpoint) => {
+      const matchBelow = this.mediaMatcher.matchMedia(responsiveMap[ screen ]).matches;
+      if (matchBelow) {
+        this.breakPoint = screen;
+      }
+    });
+    this.updateGutter();
+  }
+
+  /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289*/
+  setClassMap(): void {
+    const classMap = {
+      [ `${this.prefixCls}` ]                                 : !this.nzType,
+      [ `${this.prefixCls}-${this.nzType}` ]                  : this.nzType,
+      [ `${this.prefixCls}-${this.nzType}-${this.nzAlign}` ]  : this.nzType && this.nzAlign,
+      [ `${this.prefixCls}-${this.nzType}-${this.nzJustify}` ]: this.nzType && this.nzJustify
+    };
+    this.nzUpdateHostClassService.updateHostClass(this.el, classMap);
+  }
+
+  constructor(public elementRef: ElementRef, public renderer: Renderer2, public nzUpdateHostClassService: NzUpdateHostClassService, public mediaMatcher: MediaMatcher, public ngZone: NgZone, public platform: Platform) {
+  }
+
+  ngOnInit(): void {
+    this.setClassMap();
+    this.watchMedia();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.nzType || changes.nzAlign || changes.nzJustify) {
+      this.setClassMap();
+    }
+    if (changes.nzGutter) {
+      this.updateGutter();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.platform.isBrowser) {
+      this.ngZone.runOutsideAngular(() => {
+        fromEvent(window, 'resize')
+        .pipe(auditTime(16), takeUntil(this.destroy$))
+        .subscribe(() => this.watchMedia());
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }
diff --git a/components/grid/public-api.ts b/components/grid/public-api.ts
index 1de7ca6bbfc..f5018a83fb7 100644
--- a/components/grid/public-api.ts
+++ b/components/grid/public-api.ts
@@ -1,5 +1,3 @@
 export * from './nz-row.directive';
-export * from './nz-row.component';
-export * from './nz-col.component';
 export * from './nz-col.directive';
 export * from './nz-grid.module';