Angular Material: Nested grid

I'm currently using Bootstrap for a web application, but want to switch to Angular Material. Right now I am playing around with the grid.

I have triple nested grid structure. I don't think the children are being displayed correctly, or at least I haven't programmed them to display correctly. I want them to not be vertically centered, but I don't know why they are behaving this way.

Additionally, I want a grid-title's header to not interfere with the child grid-list (I want the child grid-list to begin underneath the grid-title-header). The same goes with the "oldest" parent's footer.

The Angular Material site has good documentation but doesn't address nested grids.

Here is a plnkr.

<body ng-app="app">
    <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
        md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px"
        md-gutter-gt-sm="4px" class="gridList">
        <md-grid-tile md-rowspan="1" md-colspan="1" md-colspan-sm="1" class="gridTile">
            <md-grid-list flex="" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
                md-row-height-gt-md="1:1" md-row-height="1:1">
                <md-grid-tile md-rowspan="2" md-colspan="1" class="flexTile">
                    <md-grid-tile-header><h4>Sub-cluster Title</h4></md-grid-tile-header>
                    <md-grid-list flex="" md-cols-sm="1" md-cols-md="2" md-cols-gt-md="3"
                        md-row-height="1:1">
                        <md-grid-tile md-colspan="1" md-rowspan="2" class="instanceTile">
                            ID
                        </md-grid-tile>
                    </md-grid-list>
                </md-grid-tile>
            </md-grid-list>
            <md-grid-tile-footer><h3>Cluster name</h3></md-grid-tile-footer>
        </md-grid-tile>
    </md-grid-list>
  </body>

I really like Material Design so far, and believe it's the future of responsive web design. I think more and more websites are going to be using it in place of Bootstrap (Bootstrap's JS components are totally jQuery dependent unless you are using something like AngularUI), so I want to learn how to use it properly.

I believe the Angular Material site lacks documentation for this layout directive, but layout-fill is exactly what I was looking for.

Here's an updated plnkr.

Just define layout-fill on the nested grid list.

<md-grid-list flex md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
    md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px"
    md-gutter-gt-sm="4px" class="gridList" layout="row">
    <md-grid-tile md-colspan="1" md-colspan-sm="1" class="gridTile">
        <md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"
          md-rows-md="4" layout-fill>
          <md-grid-tile md-colspan="1" md-rowspan="1"  layout="col" 
            class="flexTile">
            Tile
          </md-grid-tile>
        </md-grid-list>
        <md-grid-tile-footer><h3>Cluster name</h3></md-grid-tile-footer>
    </md-grid-tile>
</md-grid-list>

And zooming in...

<md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"
  md-rows-md="4" layout-fill>
  <md-grid-tile md-colspan="1" md-rowspan="1"  layout="col" 
    class="flexTile">
    Tile
  </md-grid-tile>
</md-grid-list>

This solution doesn't include the solve for tile headers and footers, but I imagine you could just define some sort of positioning to make it work.

来源：https://stackoverflow.com/questions/32890631/angular-material-nested-grid

标签

javascript

angularjs

grid

flexbox

angular-material