Does Angular Material Have a Grid System

does angular material have a grid system?

If you are using Material2, you can use Angular Flex Layout for responsiveness. It compliments Angular2 well and is lightweight.

Basically Material2 + Flex-layout is equivalent to Bootsrap library.

Here's an example of how flex-layout can be used for grid system/responsiveness with Angular/Material2.

Sample Code showing use of flex-layout API:

<div fxShow.xs="true" fxShow="false" >Screen size <h1>XS</h1></div>
    <div fxShow.sm="true" fxShow="false" >Screen size <h1>SM</h1></div>
    <div fxShow.md="true" fxShow="false" >Screen size <h1>MD</h1></div>
    <div fxShow.lg="true" fxShow="false" >Screen size <h1>LG</h1></div>
    <div fxShow.xl="true" fxShow="false" >Screen size <h1>XL</h1></div>

    <div fxLayout="row" 
         fxLayout.xs="column"
         fxLayoutGap="10px"
         fxLayoutAlign.xs="center center"
         fxLayoutWrap>
      <div class="sample-div" fxFlexOrder.lt-md="7">Div 1</div>
      <div class="sample-div" fxFlexOrder.lt-md="6">Div 2</div>
      <div class="sample-div" fxFlexOrder.lt-md="5">Div 3</div>
      <div class="sample-div" fxFlexOrder.lt-md="4">Div 4</div>
      <div class="sample-div" fxFlexOrder.lt-md="3">Div 5</div>
      <div class="sample-div" fxFlexOrder.lt-md="2">Div 6</div>
      <div class="sample-div" fxFlexOrder.lt-md="1">Div 7</div>
      <div class="sample-div" fxFlexOrder.lt-md="0">Div 8</div>
    </div>

Angular Material Grid Layout

I'll give you the basics.

In Angular Material (for Angular 2/4) the most commonly used attributes are:

fxLayout="row | column"
fxLayoutAlign="start | center | end | stretch | space-around | space-between | none" (can accept 2 properties at the same time)
fxFlex="number" (can accept numbers from 1 to 100)

You can also use postfix as fxLayout.xs and so on to apply rules only for specific resolution.

For more info you can look through the docs: https://github.com/angular/flex-layout/wiki/API-Documentation

To play around with alignment, you can use the demonstration from Angularjs Material resource (it's totally the same as for Angular Material for Angular 2/4): https://material.angularjs.org/latest/layout/alignment

And another one useful link: https://tburleson-layouts-demos.firebaseapp.com/#/docs

angular material grid system

The main reason to go with Angular Material is because it is based on Flexible Box Layout specification, witch is a W3C standard Flexible Box.

The closer tag for bootstrap container could be: <div layout="row" layout-wrap></div>

Angular 7 responsive layout using Material Grid

In grid layouts, only ratios really matter (not actual column counts). In your case, the ratios between tile sizes doesn't change - the first tile is always twice as wide as the second and third tiles. So you can mathematically reduce your mobile layout to:

A- 6 (6/6)
B- 3 (3/6)
C- 3 (3/6)

Now, the tile colspan values are the same for both layouts, the only difference is the number of columns. This makes it simpler to implement a responsive design, because you only need to change the cols value between 12 and 6.

Bind the cols value input to an expression:

<mat-grid-list [cols]="isMobile ? 6 : 12">...

Use CDK's Layout module to detect device changes:

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
...
class MyComponent {

  public isMobile: boolean = false;

  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.Handset
    ]).subscribe(result => {
      this.isMobile = result.matches;
    });
  }

  ...
}

You can also customize the break point based on screen size:

breakpointObserver.observe([
  '(max-width: 599px)'
]).subscribe(result => {
  this.isMobile = result.matches;
});

Can I make a grid system with Material2?

<mat-grid-list> is not a layout component. It's meant to represent the Grid List component as it exists in the Material design language.

Flex-layout is the module most often recommended with the Material library to use for layout structuring, as most of the components use flex styling. It's possible to achieve a Bootstrap-like grid with the fxFlex directives, but it requires some thought and setup.

@angular/material itself is a component library, not a layout tool. It's compatible with any layout libraries, like flex-layout and Bootstrap. If you want the Bootstrap grid, go ahead and throw it in.

Can angular-ui-grid be used with angular material design?

It can, but only at a look and feel level. Basically most of the visual elements in ui-grid are over-rideable with templates (cellTemplate, rowTemplate etc). You can also override a lot of the css. So if you're prepared to work through it there's no reason why most of it cannot be tailored.

Most efficient way to delimit key

Use str_split():

$string = '0123456789012345';
$sets = str_split($string, 4);
print_r($sets);

The output:

Array
(
    [0] => 0123
    [1] => 4567
    [2] => 8901
    [3] => 2345
)

Then of course to insert hyphens between the sets you just implode() them together:

echo implode('-', $sets); // echoes '0123-4567-8901-2345'

---

Related Topics