search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.15k stars 2.15k forks source link

Docs: layout-grid: add note about how to add several rows #1072

Open evil-shrike opened 7 years ago

evil-shrike commented 7 years ago

In all samples in docs and the catalog there's only a single row always:

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell"></div>
    <div class="mdc-layout-grid__cell"></div>
    <div class="mdc-layout-grid__cell"></div>
  </div>
</div>

It's not obvious how to add a next row if it's supported at all: should I add a next mdc-layout-grid__inner under same mdc-layout-grid (yes, it woks)? 

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell"></div>
  </div>
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell"></div>
  </div>
</div>

Or only add another mdc-layout-grid:

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell"></div>
  </div>
</div>
<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell"></div>
  </div>
</div>

?

feupeu commented 6 years ago

Any progress on this? I'm still lookin for an answer to this question. Also, it is somehow possible to the grid "auto wrap", e.g. if you have 6x cells that each are span 4, it would wrap into two lines?

acdvorak commented 6 years ago

I'm not too familiar with Layout Grid, but I believe you can just add more cells, and they will wrap automatically:

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell">4</div>
    <div class="mdc-layout-grid__cell">4</div>
    <div class="mdc-layout-grid__cell">4</div>
    <div class="mdc-layout-grid__cell">4</div>
    <div class="mdc-layout-grid__cell">4</div>
    <div class="mdc-layout-grid__cell">4</div>
  </div>
</div>

The above markup gets rendered as two rows:

screenshot of 2 rows

We should probably update our docs and examples to reflect this.