Possibility for empty cells in grid to take up no space

PeteCrighton commented 6 years ago

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>

moog16 commented 6 years ago

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.

ranjeet-choudhary commented 5 years ago

@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?

MrSimmmons commented 5 years ago

+1 would be really helpful

SampsonCrowley commented 4 years ago

@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

material-components / material-components-web

Possibility for empty cells in grid to take up no space #2270