At the top fix a row of cells as a sample

I want to build a sample grid for with which to compare all cells during development. In other words, I'd like to fix a standard cells for comparison (colored red). When scrolling, all other elements may be drawn near them.

Codepen: https://codepen.io/Nonverbis/pen/GRNvyzM

Code:

      <!doctype html>
      <html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  <style>

    .fixed-top {
            position:fixed;
            top:0;
            width:100%;
            z-index:100;
    }

    @media(max-width: 839px){
        .tablet-none {
             display: none;
        }
    }

    @media(max-width: 600px){
        .mobile-none {
             display: none;
        }
    }

    .lime {
        background-color: lime;
    }

    .red {
        background-color: red;
    }

    .margin-top-300 {
        margin-top: 300px;
    }

    .margin-bottom-1500 {
        margin-bottom: 1500px;
    }

  </style>
</head>
<body>

<div class="fixed-top">
    <div class="mdc-layout-grid">
      <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell--span-1-phone lime">1</div>
        <div class="mdc-layout-grid__cell--span-1 lime">2</div>
        <div class="mdc-layout-grid__cell--span-1 lime">3</div>
        <div class="mdc-layout-grid__cell--span-1 lime">4</div>
        <div class="mdc-layout-grid__cell--span-1 lime mobile-none">5</div>
        <div class="mdc-layout-grid__cell--span-1 lime mobile-none">6</div>
        <div class="mdc-layout-grid__cell--span-1 lime mobile-none">7</div>
        <div class="mdc-layout-grid__cell--span-1 lime mobile-none">8</div>
        <div class="mdc-layout-grid__cell--span-1 lime mobile-none tablet-none">9</div>
        <div class="mdc-layout-grid__cell--span-1 lime mobile-none tablet-none">10</div>
        <div class="mdc-layout-grid__cell--span-1 lime mobile-none tablet-none">11</div>
        <div class="mdc-layout-grid__cell--span-1 lime mobile-none tablet-none">12</div>
      </div>
    </div>
</div>
<div class="mdc-layout-grid margin-top-300 margin-bottom-1500">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell--span-1-phone red">1</div>
    <div class="mdc-layout-grid__cell--span-2 red">2</div>
    <div class="mdc-layout-grid__cell--span-3 red">3</div>
    <div class="mdc-layout-grid__cell--span-5 red">4</div>
    <div class="mdc-layout-grid__cell--span-1 red mobile-none">5</div>
  </div>
</div>

</body>
</html>

This is Google's material.io.

The documentation for this: https://material.io/develop/web/supporting/layout-grid

Problem

The sizes of the elements fixed at the top are distorted.

Could you help me?