feat(grid): Responsive 12-column flex grid.

Feature Description

Why doesn’t this framework have a responsive 12 column flex grid with screen breakpoints?

At this moment we have to use another dependency (like bootstrap, or flex libs, or own implemention) to have this feature.
But this should be a part of an UI framework. Please consider to implement this. Just a simple responsive flex grid.

The Angular Material Grid List has other use cases. It’s different from e.g. Ionic Grid or Bootstrap Grid or Vuetify Grid.

Use Case

Actually self-explanatory. See the links above. This is one essential system for app layouts.

image

Could look like:

<mat-grid>
  <mat-row>
    <mat-col size-md="3">
      <div>
        1 of 3
      </div>
    </mat-col>
    <mat-col size-md="3">
      <div>
        2 of 3
      </div>
    </mat-col>
    <mat-col size-md="3" offset-md="3">
      <div>
        3 of 3
      </div>
    </mat-col>
  </mat-row>
</mat-grid>

Also see breakpoints.

image

1 possible answer(s) on “feat(grid): Responsive 12-column flex grid.

  1. For this project, we made the decision long ago to not get into the application layout business and instead defer that to existing solutions in the web space since there’s nothing particularly Angular-centric about it. We try to, as much as possible, keep the UI components as blackboxes agnostic to page layout.