Angular Material Grids - Angular Material

What is Angular Material Grids?

The md-grid-list an Angular directive, is a component for laying out content for various display screen sizes. A grid has 12 columns inside the computer size screen, 8 inside the tablet length display screen, and 4 within the cellphone size display, where each length have predefined margins and gutters. Cells are laid out in sequential manner in a row, within the order they're described.

Attributes

S.N.

Parameter & Description

1

* md-cols
Number of columns in the grid.

2

* md-row-height
One of

· CSS length - Fixed height rows (eg. 8px or 1rem).

· {width}:{height} - Ratio of width to height (eg. md-row-height="16:9").

· "fit" - Height will be determined by subdividing the available height by the number of rows.

3

md-gutter
The amount of space between tiles in CSS units (default 1px).

4

md-on-layout
Expression to evaluate after layout. Event object is available as $event, and contains performance information.

Example

The next instance showcases the use of md-grid-list directive to showcase uses of grid.

am_grid.htm


Result

Confirm the result.

AM Grids

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Angular Material Topics