使用Angular5+Material2能否实现类Bootstrap的响应式栅格系统？

Hey there! I’ve been right where you are—trying to replicate Bootstrap’s familiar row/column responsive grid system in Angular 5 with Material 2. Let’s break down your two options clearly:

MatGridListModule: What It Does (and Doesn’t Do) #

First off, MatGridList is great for card-based, uniform grid layouts (think image galleries or dashboard tiles), but it’s not a direct replacement for Bootstrap’s grid system. Here’s why:

• It doesn’t have explicit "row" or "offset" classes, nor does it support syntax like col-md-4 or col-xs-12 out of the box.
• Rows are auto-generated based on the cols property—you set how many columns fit per row, and tiles wrap automatically.
• You can make it responsive, but it requires manual setup (like using Angular’s BreakpointObserver to adjust the cols value across screen sizes) instead of pre-built responsive classes.

Example of responsive MatGridList:

// In your component
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

cols = 3;

constructor(private breakpointObserver: BreakpointObserver) {}

ngOnInit() {
  this.breakpointObserver.observe([Breakpoints.Handset])
    .subscribe(result => {
      this.cols = result.matches ? 1 : 3;
    });
}

<!-- In your template -->
<mat-grid-list [cols]="cols" rowHeight="2:1" gutterSize="16px">
  <mat-grid-tile>Tile 1</mat-grid-tile>
  <mat-grid-tile>Tile 2</mat-grid-tile>
  <mat-grid-tile>Tile 3</mat-grid-tile>
</mat-grid-list>

Flex Layout: The Bootstrap-Style Grid Alternative #

If you want something that mimics Bootstrap’s row/column behavior (with responsive breakpoints, offsets, and flexible sizing), Angular Flex Layout is exactly what you need. It’s a set of Angular directives built on CSS Flexbox, designed to work seamlessly with Material 2.

Key features that match Bootstrap’s grid:

• fxLayout="row" replaces Bootstrap’s row (use fxLayout.xs="column" to switch to columns on mobile)
• fxFlex="33%" (or fxFlex.md="33%") acts like col-md-4
• fxFlexOffset="10%" replaces offset classes
• It supports all standard breakpoints (xs, sm, md, lg, xl) with suffixes like .xs or .md

Example of a Flex Layout grid matching Bootstrap’s structure:

<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px">
  <!-- 25% width on desktop, 100% on mobile -->
  <div fxFlex="25%" fxFlex.xs="100%">Column 1</div>
  <!-- 50% width on desktop, 100% on mobile -->
  <div fxFlex="50%" fxFlex.xs="100%">Column 2</div>
  <!-- 25% width on desktop, 100% on mobile -->
  <div fxFlex="25%" fxFlex.xs="100%">Column 3</div>
</div>

Final Recommendation #

• Use MatGridList if you’re building a uniform tile-based layout (like a gallery or dashboard).
• Use Flex Layout if you need the flexibility of Bootstrap’s row/column system with responsive breakpoints, offsets, and custom sizing—it’s the "correct" tool for replicating that Bootstrap grid experience in Angular 5 + Material 2.

内容的提问来源于stack exchange，提问作者Baptiste