In order to make it easy to place various objects on the web page, people usually use a grid. In Materialize the grid can have multiple rows and each row can be divided into 12 columns. The name "row" is actually slightly confusing in this context. A name such as "block" might have been better as each "row" can actually contain several 12-width physical row.

For more details see the documentation of the grid

examples/materializecss/rows-and-columns.html

<!DOCTYPE html>
<html>
  <head>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Materialize: rows and columns</title>
  </head>

  <body>
    <div class="container">

      <h3>A row with a single line of 12 1-width columns</h3>
      <div class="row">
        <div class="col s1">1</div>
        <div class="col s1">2</div>
        <div class="col s1">3</div>
        <div class="col s1">4</div>
        <div class="col s1">5</div>
        <div class="col s1">6</div>
        <div class="col s1">7</div>
        <div class="col s1">8</div>
        <div class="col s1">9</div>
        <div class="col s1">10</div>
        <div class="col s1">11</div>
        <div class="col s1">12</div>
      </div>

      <h3>A row with two lines: a line with a single 12-width column and a line with 2 6-width columns</h3>
      <div class="row">
        <div class="col s12">This div is 12-width column on all screen sizes</div>
        <div class="col s6">6-width column</div>
        <div class="col s6">6-width column</div>
      </div>

      <h3>A row with two lines: a line with a single 12-width column and a line with various width columns</h3>
      <div class="row">
        <div class="col s12">This div is 12-columns wide on all screen sizes</div>
        <div class="col s1">1-col</div>
        <div class="col s2">2-col</div>
        <div class="col s3">3-col</div>
        <div class="col s6">6-col</div>
      </div>

      <div class="row">
        <div class="col s12"><span class="flow-text">This div is 12-width column</span></div>

        <div class="col s6 offset-s6"><span class="flow-text">6-width column (offset-by-6)</span></div>

        <div class="col s6 offset-s3"><span class="flow-text">6-width column (offset-by-3)</span></div>
        <div class="col s3"><span class="flow-text">&nbsp;<!-- has to be filled with something to take up the rest of the line --></span></div>

        <div class="col s2"><span class="flow-text">2-width col</span></div>
        <div class="col s10"><span class="flow-text">This div is 10-width column</span></div>
      </div>

    </div>
    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

<style>
.col:nth-of-type(even) {
    background-color: #add8e6;
}
.col:nth-of-type(odd) {
    background-color: #e0e0e0;
}
</style>
Try!

At the bottom of the file I've added some manual CSS in order to change the background-color of the boxes. Hopefully this will make it easier to see the individual cells in the grid.