0

I am trying to create a horizontally-centered variable-margin grid that has fixed column widths, yet the column count is responsive.

<md-bottom-sheet class="no-pad">
  <nav id="resource-tray">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h3>title</h3>
        <span flex class="flex"></span>
        <md-button aria-label="Close Tray" ng-click="closeTray()" id="resource-tray-close-control">X</md-button>
      </div>
    </md-toolbar>
    <md-content layout-align="center">
      <md-grid-list
          md-cols-xs="1" md-cols-sm="3" md-cols-md="5" md-cols-lg="7" md-cols-gt-lg="11"
          md-colspan="173px"
          md-row-height="158px">
        <md-grid-tile ng-repeat="page in state.pages"
                  ng-click="selectResource($parent.$index+1)"
                  md-colspan-gt-sm="1"
                  md-rowspan-gt-sm="1">
          <resource-tile ng-repeat="resource in page.data" ng-click="selectResource($parent.$index+1)"></resource-tile>
        </md-grid-tile>
      </md-grid-list>
    </md-content>
  </nav>
</md-bottom-sheet>

In the above example, I assumed that setting 

<md-grid-list md-colspan="173px" ...>

would fix the column widths, but it's not working.

Chrizzis
  • 99
  • 1
  • 9

1 Answers1

0

If you are trying the resize the bottom sheet add flex="..." in the md-bottom-sheet tag and to align it in the center add layout-align="..." to the md-buttom-sheet tag. If thats not what you are trying to do please let me know. –

Manoj
  • 497
  • 7
  • 13
  • I'm not trying to resize the bottom sheet. I am trying to make the grid columns fixed widths with fixed gutters/padding. – Chrizzis Mar 30 '16 at 14:14
  • Also, if md-grid-list is not the solution, I'm not attached to it. I just want to create a grid that has this responsive column count: md-cols-xs="1" md-cols-sm="3" md-cols-md="5" md-cols-lg="7" md-cols-gt-lg="11", and has fixed column widths and gutters. – Chrizzis Mar 30 '16 at 14:27
  • I saw the responsive answer to this question: [Trying to have a grid of card with angular material](http://stackoverflow.com/questions/31726180/trying-to-have-a-grid-of-card-with-angular-material) which satisfies all but one of my requirements. I need the grid to be centered. – Chrizzis Mar 30 '16 at 14:53
  • http://blog.sodhanalibrary.com/2015/08/tiles-design-with-md-grid-list-of.html#.VvtCHOV974Y Try this site. For centering try adding an empty tile as offsets in both sides. – Manoj Mar 31 '16 at 04:15