Material-components-web: Possibility for empty cells in grid to take up no space

Created on 18 Feb 2018 · 4Comments · Source: material-components/material-components-web

In order to center elements in a grid on all devices, it would be good to have the ability to declare something like <div class="mdc-layout-grid__cell--span-0-<TYPE_OF_DEVICE>"></div> that takes up no space at all.
See example below where I have several cards in a layout grid. If there are not enough cards to fill a row, I want to center them on the page and have all that flexible on every type of device. Here it works for desktop and mobile (sort of – I assume I will be able to correctly adjust the gutter around empty grid cells). But I can’t get tablet to work – mdc-layout-grid__cell--span-12-tablet helps for an empty row (again, gutter needs adjusting), but I see no way to make empty cells that are needed for desktop disappear for tablet.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"
        href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <?php $array = array(1); ?>
    <?php /* $array = array(1, 2); */ ?>
    <?php /* $array = array(1, 2, 3); */ ?>
    <?php /* $array = array(1, 2, 3, 4); */ ?>
    <?php /* $array = array(1, 2, 3, 4, 5); */ ?>
    <?php /* $array = array(1, 2, 3, 4, 5, 6); */ ?>
    <?php $index = 0; ?>
    <?php foreach($array as $a): ?>

      <?php if(count($array)==1 && $index==0): ?>
        <div class="mdc-layout-grid__cell
                    mdc-layout-grid__cell--span-4-desktop
                    mdc-layout-grid__cell--span-2-tablet"></div>
      <?php endif ?>
      <?php if(count($array)==2 && $index==0): ?>
        <div class="mdc-layout-grid__cell
                    mdc-layout-grid__cell--span-2-desktop
                    mdc-layout-grid__cell--span-12-tablet"></div>
      <?php endif ?>
      <?php if(count($array)==3 && $index==0): ?>

      <?php endif ?>
      <?php if(count($array)==4 && $index==3): ?>
        <div class="mdc-layout-grid__cell
                    mdc-layout-grid__cell--span-4-desktop"></div>
      <?php endif ?>
      <?php if(count($array)==5 && $index==3): ?>
        <div class="mdc-layout-grid__cell
                    mdc-layout-grid__cell--span-2-desktop"></div>
      <?php endif ?>

      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
        <div class="mdc-card">
          <?= $index ?>
        </div>
      </div>
      <?php $index++; ?>
    <?php endforeach ?>
  </div>
</body>
</html>

backlog

Source

PeteCrighton

Most helpful comment

We confirmed with design that the concept of having a 0 width grid cell is ok. We realize this makes development a lot easier than having to write up your own media-query selectors. Will track this issue.

moog16 on 1 Mar 2018

👍2

All 4 comments

moog16 on 1 Mar 2018

👍2

@PeteCrighton
Setting minmax(0, 1fr) to minmax(0, auto) fixes the issue of empty cells in grid to take up no width
grid-template-columns: repeat(map-get($mdc-layout-grid-columns, $size), minmax(0, auto));
justify-content: center;
But couldn't find way to adjust the gutter around empty grid cells.
Let me know if you found any better solution.

@moog16
Is there a way to use mdc-layout without @supports (display: grid) {
display: grid;
}
mdc-layout-grid-inner fall backs to display: flex for grid unsupported browser
@mixin mdc-layout-grid-inner($size, $margin, $gutter) {
display: flex;
@supports (display: grid) {
display: grid;
}}
Sometimes its helpful to just use flex, like in the above case of not displaying empty cells.
Or is there any possibility of mdc-layout-flex which just uses flex?

ranjeet-choudhary on 18 Aug 2018

+1 would be really helpful

CyborgSemon on 29 Sep 2018

@PeteCrighton @moog16 @ranjeet-choudhary @CyborgSemon I just submitted a pull request that both fixes this and the specificity of "base" span-{1,2,3,4,5...} classes being equal to size-specific spans if you wanna go vote for it